Обратный отсчет с использованием ванили JavaScript

У меня есть эта страница с textarea и 3 buttons. textarea получает номер. В первом button начинается coutdown от числа до 0, с задержкой вывода (один номер в секунду, поэтому, если N равно 10, это займет 10 секунд). Второй button приостанавливает обратный отсчет, а третий button возобновляет его (без запуска). Нажатие первого button в любое время во время выполнения перезапускает coutdown с любым номером в textarea. Это код, который я до сих пор:Обратный отсчет с использованием ванили JavaScript

<!DOCTYPE html> 
<html> 
    <body> 
     <h2>Insert a number:</h2> 
     <textarea id="input"></textarea> 
     <br/> 
     <button id="start" onclick="begin()">BEGIN</button> 
     <button id="pause" onclick="pause()">PAUSE</button> 
     <button id="resume" onclick="resume()">RESUME</button> 
     <h1 id="result"></h1> 
     <script> 
      var isCounting=true, 
       input=document.getElementById("input"), 
       countSec; 
      function begin() { 
       countSec=input.value; 
       if (isNaN(countSec)) alert("NaN"); 
       count(); 
      } 
      function pause() { 
       isCounting=false; 
      } 
      function resume() { 
       isCounting=true; 
       count(); 
      } 
      function count() { 
       var i, 
        bck=countSec; 
       for (i=0; i<=bck; i++) { 
        document.getElementById("result").innerHTML=countSec; 
        countSec--; 
       } 
      } 
     </script> 
    </body> 
</html>

Есть ли способ, чтобы остановить выполнение в течение 1 секунды после countSec--? Я пытался в течение 2 часов что-то делать с объектами Date и setTimeout, но я просто не могу понять, как сделать паузу после каждого for итерации

источник

2016-11-15 ayyelmayo77

Вот вариант:

<script> 
     var input=document.getElementById("input"), 
      countSec, 
      timer = null; 

     function begin() { 
      countSec=input.value; 
      if (isNaN(countSec)) alert("NaN"); 
      if(timer === null) { 
       timer = setTimeout(count, 1000); 
      } 
     } 

     function pause() { 
      clearTimeout(timer); 
      timer = null; 
     } 

     function resume() { 
      if(timer === null) { 
       timer = setTimeout(count, 1000); 
      } 
     } 

     function count() { 
      if(countSec > 0) { 
       countSec--; 
      } 

      document.getElementById("result").innerHTML = countSec; 

      if(countSec > 0) { 
       timer = setTimeout(count, 1000); 
      } 
     } 
    </script>

Как begin называется он устанавливает таймер на count через 1 секунду.

count Когда позже вызывается он уменьшает счетчик, обновляет HTML и графики само по себе, чтобы напомнить через 1 секунду с setTimeout() (если не -of курс- счетчик достиг нуля)

Запланированное задание сохраняется в timer поэтому его можно отменить с помощью clearTimeout() (см. pause())

Для возобновления обратного отсчета просто позвоните count().

timer установлен в null, когда счетчик не работает, и проверяется перед началом его обеспечить только один счетчик работает.

источник

2016-11-15 18:30:56 Paolo

лишь небольшая вещь, делает ваш код 'countSec -' перед выводом первого числа, так что мне пришлось измените первую строку функции begin с помощью 'countSec = parseInt (input.value) + 1' – ayyelmayo77

yes, your're right! Вы также можете использовать 'setTimeout' в' begin'. Как вы уже разобрались с исправлением, я отредактирую ответ с этой второй. – Paolo

Кроме того, разные функции функции count() 'запускаются одновременно, если вы дважды нажимаете кнопку« Начало »и, как результат, обратный отсчет быстрее обычного. Или, по крайней мере, это то, что, как я считаю, происходит, я все еще новичок в 'setInterval' и' setTimeout'. В любом случае, я добавил 'clearTimeout (таймер);' под 'countSec -' в первом блоке 'if' в функции' count', и он (магически?) Работает – ayyelmayo77

Если вам нужна задержка между каждым вычитанием countSec, тогда я рекомендую вам используйте функцию setInterval. Я изменил свой код следующим образом:

var isCounting=true, 
    input=document.getElementById("input"), 
    countSec 
    interval; 
function begin() { 
    countSec=input.value; 
    if (isNaN(countSec)) alert("NaN"); 
    count(); 
} 
function pause() { 
    isCounting=false; 
    clearInterval(interval); 
} 
function resume() { 
    isCounting=true; 
    count(); 
} 
function count() { 
    var i, 
     bck=countSec; 

    document.getElementById("result").innerHTML=bck;    

    interval = setInterval(function() { 
     countSec--; 
     document.getElementById("result").innerHTML=countSec;    
    }, 1000); 
}

В частности, я создал глобальную interval переменную, которая будет хранить ссылку на интервал. Я устанавливаю интервал в count(), а затем обновляю идентификатор #result при каждом тике интервала (который имеет задержку в 1000 мс). Чтобы сделать паузу, я очищаю интервал. Я оставил много кода в тактике, хотя некоторые из них не используются (например, isCounting);

Вот код в действии: https://jsfiddle.net/exex7jh0/

источник

2016-11-15 18:24:56

Это звучит как идеальный сценарий для осуществления операций асинхронных интервальные встроенных в JavaScript в.

Ваш таймер должен располагаться вокруг setInterval (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval). В принципе, вы каждый раз настраиваете свой интервал, чтобы увеличить счетчик.

Чтобы приостановить обратный отсчет, вы хотите использовать clearInterval (https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval). Вы также можете использовать интервал ID, чтобы определить, работает ли таймер setInterval или нет.

Эти строительные блоки должны вас поймать. Если вам нужна дополнительная информация, просто спросите.

источник

2016-11-15 18:27:01 TheJim01

Что вы хотите, чтобы ваша count функции содержит самостоятельный вызов таймера, например:

var timer; 

function count() { 
    var result = document.getElementById("result"); 

    step(); 

    function step() { 
     result.innerHTML=countSec; 
     countSec--; 
     if (countSec > 0) { 
      timer = setTimeout(step, 1000); 
     } 
    } 
}

Но знайте, что тайм-аут не действительно граф 1000мс. Если вы хотите быть точным, вам придется сравнивать с временем, когда все началось. и ниже интервал:

var timer, 
    start, 
    moment, 
    input = document.getElementById("input"), 
    result = document.getElementById("result"); 

function begin() { 
    var from = ((parseInt(input.value) + 1) * 1000); 
    start = Date.now() + from; 
    setTimeout(count, 40); 
} 

function pause() { 
    clearTimeout(timer); 
} 

function resume() { 
    start = Date.now() + (moment * 1000); 
    count(); 
} 

function count() { 
    moment = parseInt((start - Date.now())/1000); 
    result.innerHTML = moment; 
    if (moment > 0) { 
     timer = setTimeout(count, 200); 
    } 
}

источник

2016-11-15 18:31:38 Omri

Я думаю, что большинство решений уже ответили на ваш вопрос. Лучше всего использовать интервальные операции в вашем решении, поскольку это более удобно, и JS уже предоставляет его.

Также лучше выделить отдельные JS и HTML. (Избегая встроенные обработчики событий)

HTML

<h2>Insert a number:</h2> 
<textarea id="input"></textarea> 
<br/> 
<button id="start">BEGIN</button> 
<button id="pause">PAUSE</button> 
<button id="resume">RESUME</button> 
<h1 id="result"></h1>

// Bind the click events 
document.getElementById('start').addEventListener('click', begin); 
document.getElementById('pause').addEventListener('click', pause); 
document.getElementById('resume').addEventListener('click', resume); 

var input = document.getElementById("input"); 
var countSec; 
var timer; 

function begin() { 
    debugger; 
    countSec = input.value; 
    if (isNaN(countSec)) alert("NaN"); 
    count(); 
    enableTimer(); 
} 

function pause() { 
    clearInterval(timer); 
} 

function resume() { 
    enableTimer(); 
} 

function count() { 
    if (countSec >= 0) { 
    document.getElementById("result").innerHTML = countSec; 
    } else { 
    clearInterval(timer); 
    } 
    countSec--; 
} 

// enable the timer again 
function enableTimer() { 
    timer = setInterval(function() { 
     count(); 
    }, 1000); 
}

JsFiddle

источник

2016-11-15 18:35:29

Вы можете использовать setInterval, интервалID и clearInterval, когда счетчик достигает нуля.

var isCounting = true, 
 
    input = document.getElementById("input"), 
 
    countSec, 
 
    intervalID; 
 

 
function begin() { 
 
    countSec = +input.value; 
 
    if (isNaN(countSec)) { 
 
     alert("NaN"); 
 
     return; 
 
    } 
 
    document.getElementById("result").innerHTML = countSec; 
 
    intervalID = setInterval(count, 1000); 
 
} 
 

 
function pause() { 
 
    isCounting = false; 
 
} 
 

 
function resume() { 
 
    isCounting = true; 
 
} 
 

 
function count() { 
 
    if (countSec === 0) { 
 
     clearInterval(intervalID); 
 
     return; 
 
    } 
 
    if (isCounting) { 
 
     countSec--; 
 
     document.getElementById("result").innerHTML = countSec; 
 
    } 
 
}

<h2>Insert a number:</h2> 
 
<textarea id="input"></textarea><br/> 
 
<button id="start" onclick="begin()">BEGIN</button> 
 
<button id="pause" onclick="pause()">PAUSE</button> 
 
<button id="resume" onclick="resume()">RESUME</button> 
 
<h1 id="result"></h1>

источник

2016-11-15 18:37:57

Heres другое решение

<!DOCTYPE html> 
<html> 

    <body> 
    <h2>Insert a number:</h2> 
    <textarea id="input"></textarea> 
    <br/> 
    <button id="start" onclick="begin()">BEGIN</button> 
    <button id="pause" onclick="pause()">PAUSE</button> 
    <button id="resume" onclick="resume()">RESUME</button> 
    <h1 id="result"></h1> 
    <script> 
     let isCounting = true; 
     let input = document.getElementById("input"); 
     let countSec = 0; 
     let countDownInterval = false; 

     function begin() { 
     countSec = input.value; 
     if (isNaN(countSec)) alert("NaN"); 
     count(); 
     } 

     function pause() { 
     isCounting = false; 
     } 

     function resume() { 
     isCounting = true; 
     } 

     function count() { 
     // Let's check we're doing a restart 
     if (countDownInterval) { 
      clearInterval(countDownInterval); 
     } 

     countDownInterval = setInterval(function() { 
      if (isCounting) { 
      document.getElementById("result").innerHTML = countSec; 
      countSec -= 1; 
      // Times up ?? 
      if (countSec == -1) { 
       clearInterval(countDownInterval); 
       countDownInterval = null; 
      } 
      } 
     }, 1000); 
     } 

    </script> 
    </body> 

</html>

jsfiddle

источник

2016-11-15 18:43:16

Обратный отсчет с использованием ванили JavaScript

ответ

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