clearinterval没有被抓住

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

你在interval内变mouseenter因此在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;
    }
}