Помогите написать функцию для кнопки ПРОДОЛЖИТЬ в таймере

Question

    let counter = 0;

    function timer () {
        counter++;
        document.getElementById('count').innerHTML = counter;
        setTimeout("timer()", 1000)
    }

    function but() {
        clearTimeout(counter)

    }

    function cont() {
    
        }


    function reset() {
        clearInterval(counter)
        counter = 0;
    }

<!DOCTYPE html>
<head>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/script.js" type="text/javascript"></script>
    
</head>
 <body onload="timer()">

 <span id="count"></span>

 <button onclick="but()" id="but">Stop</button>

 <button onclick="cont()" id="cont">Continue </button>

 <button onclick="reset()" id="reset">Reset </button>
 


 </body>

Answer 1

Для начала setTimeout() первым параметром получает функцию и возвращает timerId. Воспользовавшись этим мы можем переписать код немного по другому

    let counter = 0;
    let counterTimer = setTimeout(timer, 1000);

    function reDraw() {
        document.getElementById('count').innerHTML = counter;
    }
    
    function timer () {
        counter++;
        reDraw();        
        counterTimer = setTimeout(timer, 1000);
    }

    function but() {
       clearTimeout(counterTimer);
    }

    function cont() {
       counterTimer = setTimeout(timer, 1000);
    }


    function reset() {
        counter = 0;
        reDraw();
    }

<!DOCTYPE html>
<head>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="js/script.js" type="text/javascript"></script>
    
</head>
 <body>

 <span id="count"></span>

 <button onclick="but()" id="but">Stop</button>

 <button onclick="cont()" id="cont">Continue </button>

 <button onclick="reset()" id="reset">Reset </button>
 


 </body>

Answer 2

Считается плохой практикой передавать строчку кода в setTimeout... "timer()". Вместо этого стоит передать туда ссылку на саму функцию, setTimeout(timer, 1000);
innerHTML используют при вставке строки HTML. Для обычного текста есть .textContent
setTimeout() - функция. Возвращает число - номер таймера, который он запустил. Именно этот номер потом нужно использовать, чтобы остановить таймер через clearTimeout(номер). Соответственно, нужно куда-нибудь сохранить номер, например, во внешнюю переменную.

let counter = 0;
let timeout = null;

function timer() {  
  counter++;
  document.getElementById('count').textContent = counter;
  
  clearTimeout(timeout);
  // Функция не знает, откуда будет запущен следующий таймер.
  // Чтобы каждый раз перед её вызовом отдельно не стирать запущенный Timeout,
  // пусть функция сама это делает на всякий случай.

  timeout = setTimeout(timer, 1000); // Номер текущего таймера записывается в переменную
}

function stop() {
  clearTimeout(timeout);
}

function cont() {
  counter--;
  timer();
}

function reset() {
  counter = 0;
  timer();
}

<body onload="timer()">

  <span id="count"></span>

  <button onclick="stop()" id="but">Stop</button>

  <button onclick="cont()" id="cont">Continue </button>

  <button onclick="reset()" id="reset">Reset </button>

</body>

onclick, onload... не стоит использовать дальше учебных примеров: Когда HTML станет большим, а на одну кнопку захочется добавить несколько функций, задолбаетесь искать / редактировать всё. Хорошо бы держать HTML - отдельно, скрипт - отдельно (см. → querySelector, querySelectorAll, addEventListener).
setTimeout, setInterval не гарантируют точность по времени. setTimeout(fn, 1000) означает, что функция будет запущена не раньше, чем через секунду. А может немного опоздать. Если важна точность таймера, его привязывают к new Date(); - т.е. функция всё также тикает через timeout, но время вычисляется и выводится через Date.

БЛОГ НА HUSL

Помогите написать функцию для кнопки ПРОДОЛЖИТЬ в таймере

Ответы (2 шт):