setTimeout之前的clearInterval無法正常工作

Question

我在清除間隔時遇到問題。 我有3個功能start1 ， start2 ， start3 。 在這里您只能看到第一個。 函數count1和變量myVar1的原理相同，編號相同。 現在的問題是， clearInterval僅在第一個函數之后才起作用（請參閱控制台日志）。 在第二個start2()之后，發生了我自己無法解釋的任何事情。 我做了一個演示 。

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使其易於檢查其工作方式。