javascript - 清除间隔未捕获

Question

我有一个按时间间隔调用的函数。 然后我设置了调用该函数的时间间隔。 我有一个 mouseleave/mouseenter 事件来分别清除和设置间隔。但是clearInterval不起作用，但是内部的匿名函数正在被调用:

interval = setInterval(function() { changeBackground(bgs); }, 2000);


    $('section#main').mouseleave(function() {
        clearInterval(interval);
        alert("j");
    });

    $('section#main').mouseenter(function() {
        var interval = setInterval(function() { changeBackground(bgs); }, 2000);
        alert("n");
    });

    function changeBackground(bgs) {
        $('#black').fadeIn(400, 'swing', function () {
            var Url = "url('content/slides/" + bgs[currentBg] + "')";
            $('#container').css('background-image', Url);
        });

        $('#black').fadeOut();

        currentBg++;

        if(currentBg == totalBg) {
            currentBg = 0;
        }
    }

Answer 1

试试这个:

var interval = null;

$('section#main').mouseleave(function() {
    clearInterval(interval);
    alert("j");
});

$('section#main').mouseenter(function() {
    interval = setInterval(function() { changeBackground(bgs); }, 2000);
    alert("n");
});

您在 mouseenter 内对 interval 进行了 var'ing，因此在 mouseleave 内未定义它。

编辑

您修改了代码:

var interval = setInterval(function() { changeBackground(bgs); }, 2000);

$('section#main').mouseleave(function() {
    clearInterval(interval);
    alert("j");
});

$('section#main').mouseenter(function() {
    interval = setInterval(function() { changeBackground(bgs); }, 2000);
    alert("n");
});

function changeBackground(bgs) {
    $('#black').fadeIn(400, 'swing', function () {
        var Url = "url('content/slides/" + bgs[currentBg] + "')";
        $('#container').css('background-image', Url);
    });

    $('#black').fadeOut();

    currentBg++;

    if(currentBg == totalBg) {
        currentBg = 0;
    }
}