javascript - setTimeout 之前的clearInterval 不起作用

Question

我在清除间隔时遇到问题。我有 3 个函数 start1、start2、start3。在这里您只能看到第一个。函数 count1 和变量 myVar1 具有相同的原理，它们具有相同的编号。现在的问题是 clearInterval 仅在第一个函数之后起作用(请参阅控制台日志)。在第二个 start2() 之后，发生了我自己无法解释的事情。我做了一个demo .

start1();

function start1() {
    var valuem = 0, dir = 1;
    $('#number').text(valuem);

    function count1() {
        valuem += dir;
        $('#number').text(valuem);
        if (valuem < 1) dir = 1;
        console.log("start1");
    }

    $("body").on({
        'touchstart mousedown': function(e) {
            if ($('#number').text() == 5) {
                window.clearInterval(myVar1);
                window.setTimeout(function() {
                    start2();
                }, 1000);
            }
        },
        'touchend mouseup': function(e) {}
    });

    var myVar1 = window.setInterval(function() {
        count1();
    }, 1000);
}

控制台日志:

5 start1

6 start2

start3

start2

start3

start2

Answer 1

您的代码在第二个函数调用后出错的原因是您在调用下一个函数时没有取消设置 mousedown touchstart 事件。因此，当您运行第二个函数时，您在 body 上有 2 个事件监听器，并且它们都有效。这会导致问题。

因此，当您调用下一个事件监听器时，请取消设置事件监听器。

$("body").on({
    'touchstart mousedown': function(e) {
        if (parseInt($('#number').text()) >= 5) {
            $(e.target).off('touchstart mousedown');
            window.clearInterval(myVar1);
            window.setTimeout(function() {
                start2();
            }, 1000);
        }
    }
});

上面的代码使用 >=5 而不是原始代码 $('#number').text() == 5 以便轻松检查它的方式有效。