间隔不会在鼠标移出时停止

Interval doesn't stop on mouseout

如果我将鼠标移出之前触发间隔函数的元素,间隔"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);
});

变量 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() 而不是 mouseentermouseout 事件。

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);
});

为了创建全局变量,声明变量名时不带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);
    });