2016-12-23 6 views
0

Я хочу, когда пользователь нажмет представить остановку таймера
когда я добавить clearInterval л есть ошибкаКак я могу остановить таймер в javascript?

мой код:

<html> 
    <body> 
    <button onclick="myStopFunction()">submit</button> 
<div><span id="time">01:00</span> minutes!</div> 
<script type="text/javascript"> 



    function startTimer(duration, display) { 
     var timer = duration, 
      minutes, seconds; 
       var handle = setInterval(function() { 
      minutes = parseInt(timer/60, 10) //10 the ten system 
      seconds = parseInt(timer % 60, 10); 
      display.textContent = minutes + ":" + seconds; 


    } 

    function myStopFunction() { 
clearInterval(myVar); 
} 
+3

Переместить 'var handle' за пределы функции startTimer. И изменить' clearInterval (myVar); 'to' clearInterval (handle); ' –

+3

Как вы думаете, на что ссылается' myVar'? Где это объявлено? – Bergi

+3

'clearInterval (myVar);' должно быть 'clearInterval (дескриптор);' и 'handle' должны объявляться глобально за пределами' startTimer' или возвращаться к глобальной переменной, доступной 'myStopFunction'. –

ответ

1

Ваш вар handle, которая содержит функцию setInterval существует только в его рамках : функция startTimer. Итак, просто объявите var handle; из ваших функций и позвоните clearInterval(handle); в функцию остановки (и, очевидно, сохраните handle = setInterval(function() {...} в своем коде).

1
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<button type="button" onclick="start()">Start</button> 
<button type="button" onclick="stop()">Stop</button> 
<p id="test"> 

</p> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 


</body> 
</html> 




    var count = 0; 
var myVar; 
    function start() { 
    myVar = setInterval(function() { 
     console.log('hi'); 
     $('#test').text('hi' + count++); 
    }, 1000); 
    return myVar; 
    } 


    function stop() { 
    clearInterval(myVar); 
    } 
+0

Как именно этот код избегает глобальных переменных? – Bergi

+0

@Bergi, если я создам переменную 'myVar', тогда она будет глобальной. –

+0

Вне чего? Отсканированный вами фрагмент * * создает глобальную переменную и в то же время советует избегать ее. – Bergi

2

У вас должен быть интервал за пределами области запуска. Хорошей практикой является создание замыкания (как показано ниже), чтобы не допускать глобальную область действия с переменными, которые не должны подвергаться воздействию.

Пожалуйста, не забудьте называть startTimer.

Вы могли бы иметь решение, как показано ниже:

<html> 
<body> 
<button onclick="myStopFunction()">submit</button> 
<div><span id="time">01:00</span> minutes!</div> 
<script type="text/javascript"> 
    (function() { //create closure to not polute global scope 
     var intervalHandle; 

     function startTimer(duration, display) { 
      var timer = duration, 
        minutes, seconds; 

      //assign interval handle to outer scope 
      intervalHandle = setInterval(function() { 
       minutes = parseInt(timer/60, 10); //10 the ten system 
       seconds = parseInt(timer % 60, 10); 
       display.textContent = minutes + ":" + seconds; 
      }, timer); 
     } 

     function myStopFunction() { 
      clearInterval(intervalHandle); 
     } 

     // export functions to global scope 
     window.startTimer = startTimer; 
     window.myStopFunction = myStopFunction; 
    })(); 
</script> 
</body> 
</html> 

Счастливый взлома!

+0

таймер не работает! –

+0

Извините, забыли добавить второй аргумент setInterval. Обновлено сообщение – Hakier

+0

таймер все еще не работает, можете ли вы попробовать его в своем редакторе, пожалуйста? –

Смежные вопросы