1

    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> 

2 ответа 2

1
  1. Считается плохой практикой передавать строчку кода в setTimeout... "timer()". Вместо этого стоит передать туда ссылку на саму функцию, setTimeout(timer, 1000);

  2. innerHTML используют при вставке строки HTML. Для обычного текста есть .textContent

  3. 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>

  1. onclick, onload... не стоит использовать дальше учебных примеров: Когда HTML станет большим, а на одну кнопку захочется добавить несколько функций, задолбаетесь искать / редактировать всё. Хорошо бы держать HTML - отдельно, скрипт - отдельно (см. → querySelector, querySelectorAll, addEventListener).
  2. setTimeout, setInterval не гарантируют точность по времени. setTimeout(fn, 1000) означает, что функция будет запущена не раньше, чем через секунду. А может немного опоздать. Если важна точность таймера, его привязывают к new Date(); - т.е. функция всё также тикает через timeout, но время вычисляется и выводится через Date.
3
  • при нажатии на продолжить несколько раз таймер накручивает секунды
    – Bogdan
    10 авг 2020 в 12:53
  • @Bogdan Добавил counter--; перед новым вызовом timer() 10 авг 2020 в 12:57
  • Огроменное спасибо
    – Bogdan
    10 авг 2020 в 12:59
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>

3
  • Что за минус? можно детали пожалуйста 10 авг 2020 в 12:32
  • убрал: Первый вариант вовсе не работал) А сейчас, единственное: Если много раз подряд тыкнуть continue, таймер будет многократно перезапускаться. 10 авг 2020 в 12:39
  • Согласен да вопрос решается одной переменной, ну или проверкой значения timerCounter 10 авг 2020 в 14:13

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.