Пуск/остановка setTimeout с кнопкой и предотвращение подсчета быстрее с большим количеством кликов

Question

Я работаю с JavaScript, и я использую функцию setTimeout для подсчета. Вот мой код ...

<button id="star">Start</button> 
<p id="time">0</p> 

var timeEl = 0; 

function start() { 
    time(); 
} 

function time() { 
    setTimeout(function() { 
     timeEl = timeEl + .1; 
     timeEnd = timeEl.toFixed(1); 
     document.getElementById("time").innerHTML = timeEnd; 
     time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", star, false); 

1. Как получить свою функцию SetTimeout, чтобы начать на остановке, когда я нажимаю на кнопку

2. Как предотвратить мой подсчет от идти быстрее тем больше я нажимаю на кнопку.

Я включил свой JSFiddle ниже! https://jsfiddle.net/pb4759jh68/0618eLoe/

Answer 1

Чтобы остановить таймер, который вы можете использовать clearTimeout(), но для этого требуется идентификатор таймера, созданного с помощью setTimeout(). Вызов setTimeout() теперь сохраняет идентификатор таймера в timeOut, а затем проверяет содержимое timeOut на start(), чтобы узнать, работает ли в данный момент таймер. Если таймер работает, то timeOut используется в clearTimeout(timeOut);.

var timeEl = 0; 
var timeOut = null; 
function start() 
{ 
    if(timeOut !== null){ 
    clearTimeout(timeOut); 
    timeOut = null; 
    }else{ 
    time(); 
    } 
} 
function time() 
{ 
    timeOut = setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", start, false); 

Я надеюсь, что этот код очищает вопрос

JSFiddle

То же самое может быть достигнуто с помощью setInterval и clearInterval. Попробуйте это JSFiddle

Answer 2

Вы можете отменить ранее установленный таймаут с clearTimeout - см. https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout.

Answer 3

попробовать это JsFiddle

var timeEl = 0,timer; 
function start() 
{ 
    time(); 
} 
function time() 
{ 
document.getElementById("star").disabled=true; 
    timer=setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

function stop(){ 
document.getElementById("star").disabled=false; 
clearTimeout(timer); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", start, false); 
var elstop = document.getElementById("stop"); 
elstop.addEventListener("click", stop, false); 

Answer 4

Я просто добавил булево, что государства, если отсчет уже запущен:

https://jsfiddle.net/0618eLoe/3/

var timeEl = 0; 
var isStarted = false; 
function startStop() 
{ 
    if (!isStarted) { 
    isStarted = true; 
    time(); 
    } else { 
    isStarted = false; 
    } 
} 
function time() 
{ 
    if (!isStarted) return; 

    setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", startStop, false); 

Answer 5

Каждый раз, когда нажимается кнопка, вы получаете вторую копию вашего таймера, которая ускоряет ваше время.

var el = document.getElementById("star"); 
el.addEventListener("click", start, false); 

Я бы рекомендовал что-то вроде этого:

var timerId = 0; 
var timeEl = 0; 
function start() 
{ 
    time(); 
} 
function time() 
{ 
    timerId = setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", function() { 
    if (timerId !== 0) { 
    clearTimeout(timerID); 
    timerId = 0; 
    } else { 
    start(); 
    } 
}, false); 

Answer 6

var timeEl = 0,g; 
 
function start() 
 
{ 
 
if(g){ 
 
\t clearTimeout(g); 
 
    timeEl = 0; 
 
} 
 
    time(); 
 
} 
 
function time() 
 
{ 
 
    g=setTimeout(function() 
 
    { 
 
    timeEl = timeEl + .1; 
 
    timeEnd = timeEl.toFixed(1); 
 
    document.getElementById("time").innerHTML = timeEnd; 
 
    time(); 
 
    }, 100); 
 
} 
 

 
var el = document.getElementById("star"); 
 
el.addEventListener("click", start, false);

tell me what else would you need. or it implements your specification. here button click will start the timer from 0 again. 

jsfiddle

Answer 7

Ниже приводится s реали растворе с использованием setInterval и clearInterval

var time = 0.0; 
var view = document.getElementById('time'); 
var running = false; 
var repeat; 

function start(){ 
    if(running){ 
     return; 
    } 
    running = true; 
    repeat = setInterval(increment, 100); 
} 

function stop(){ 
    clearInterval(repeat); 
    running = false; 
} 

function increment(){ 
     time += 0.1; 
     view.innerText = time.toFixed(1); 
} 

Демо:

https://jsfiddle.net/m7bmc2uj/