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，並且它們都可以工作。這會導致問題。

因此，當您撥打下一個電話時，請取消設置事件監聽器。

$("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使其容易辨認的它是如何工作的。