Question

如果我将鼠标移出之前触发间隔功能的元素，则间隔“myInterval”将不会停止。为什么不停止？

$(".postimagepic").mouseenter(function () {
    var link = $("#blurpost").attr("src").split("/").pop().split(".", 1)[0];
    var myInterval = setInterval(function () {
        $.ajax({
            url: 'asdf.php',
            type: 'post',
            data: {
                'user': 'yy',
                'topost': link
            },
            success: function () {

            }
        });
    }, 1000);
}).mouseout(function () {
    clearInterval(myInterval);
});

Answer 1

变量myInterval 私有到mouseenter回调函数，因此无法在该函数之外访问。要使其可以从mouseout回调函数访问，请在函数外部声明变量。

var myInterval; // Define it here to make it global

$(".postimagepic").mouseenter(function () {
    var link = $("#blurpost").attr("src").split("/").pop().split(".", 1)[0];
    myInterval = setInterval(function () {
        $.ajax({
            ...
        });
    }, 1000);
}).mouseout(function () {
    // Accessible here
    clearInterval(myInterval);
});

我还建议您使用hover()代替mouseenter和mouseout个事件。

var myInterval; // Define it here to make it global

$(".postimagepic").hover(function () {
    var link = $("#blurpost").attr("src").split("/").pop().split(".", 1)[0];
    myInterval = setInterval(function () {
        $.ajax({
            ...
        });
    }, 1000);
}, function () {
    clearInterval(myInterval);
});

Answer 2

为了制作全球变量，请在不使用 var 关键字的情况下声明变量名称。

如下所示

$(".postimagepic").mouseenter(function () {
        var link = $("#blurpost").attr("src").split("/").pop().split(".", 1)[0];
        myInterval = setInterval(function () { //change here only
            $.ajax({
                url: 'asdf.php',
                type: 'post',
                data: {
                    'user': 'yy',
                    'topost': link
                },
                success: function () {

                }
            });
        }, 1000);
    }).mouseout(function () {
        clearInterval(myInterval);
    });

间隔不会在mouseout上停止

2 个答案: