2013-11-29 2 views
-1

У меня есть код, как показано ниже, который использовался для запуска и остановки таймера. Он работал нормально, если щелкнуть один раз при запуске и остановке. Как, если я нажимаю старт более одного раза и как мне остановить «предыдущий созданный» setInterval?Как очистить существующий setInterval?

<html> 
    <head> 
     <script> 
     var myVar; 

     function myStartFunction() { 
      myVar = setInterval(function() { 
       myTimer(); 
      }, 1000); 
     } 

     function myTimer() { 
      var d = new Date(); 
      var t = d.toLocaleTimeString(); 
      document.getElementById("demo").innerHTML = t; 
     } 

     function myStopFunction() { 
      clearInterval(myVar); 
     } 
     </script> 
    </head> 
    <body> 
     <p id="demo"></p> 
     <button onclick="myStopFunction()">Stop time</button> 
     <button onclick="myStartFunction()">Start time</button> 
    </body> 
</html> 
+3

Вы видите проблемы, с первого взгляда не похоже, что возникнут какие-либо ошибки. –

+0

Кажется, вам нужен только один таймер, если myVar действителен, myStartFunction может просто вернуться; – Andrew

+1

Почему не просто 'myVar = setInterval (myTimer);' вместо того, чтобы его обернуть? – 6502

ответ

3

Значение, возвращаемое setInterval, называется ручкой таймера. Если вы хотите иметь возможность вызывать «запуск» более одного раза и одновременно запускать несколько таймеров, вам нужно сохранить ручки в массиве.

Так, например, если вы хотите «стоп», чтобы остановить таймер последний вы начали:

var timers = []; 

function myStartFunction() { 
    timers.push(setInterval(function() { 
     myTimer(); 
    }, 1000)); 
} 

function myTimer() { 
    var d = new Date(); 
    var t = d.toLocaleTimeString(); 
    document.getElementById("demo").innerHTML = t; 
} 

function myStopFunction() { 
    if (timers.length > 0) { 
     clearInterval(timers.pop()); 
    } 
} 

Side Примечание: Вам не нужно анонимную функцию в myStartFunction, вы можете просто использовать myTimer непосредственно:

function myStartFunction() { 
    timers.push(setInterval(myTimer, 1000)); 
} 
+0

Почему оболочка вместо использования 'setInterval (myTimer)'? – 6502

+0

@ 6502: Потому что я просто делал минимальный мод кода OP. См. Примечание в конце ответа. –

+0

Если бы это было раньше, извините, но я этого не заметил. Если раньше этого не было, я просто узнал, что это настоящая ** причина постоянного редактирования ответа :-) – 6502

0

Это должно быть так.

<html> 
    <head> 
     <script> 
     function myStartFunction() { 
      clearInterval(myTimer); 
      setInterval(myTimer, 1000); 
     } 

     function myTimer() { 
      var d = new Date(); 
      var t = d.toLocaleTimeString(); 
      document.getElementById("demo").innerHTML = t; 
     } 

     function myStopFunction() { 
      clearInterval(myTimer); 
     } 
     </script> 
    </head> 
    <body> 
     <p id="demo"></p> 
     <button onclick="myStopFunction()">Stop time</button> 
     <button onclick="myStartFunction()">Start time</button> 
    </body> 
</html> 
Смежные вопросы