clearInterval before setTimeout wont work

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 события, когда вы звоните следующий. Итак, в то время, когда вы запускаете вторую функцию, у вас есть 2 прослушивателя событий на 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, чтобы сделать его легко проверяемый, как это работает.