Блог

Главная - Вопросы по программированию - Повторение setInterval

Повторение setInterval

#javascript #html

#javascript #HTML

Вопрос:

В настоящее время я использую setInterval функцию в JavaScript для HTML-страницы. У него есть кнопка, которая позволяет мне начинать обратный отсчет от 10 до 0 с интервалом в 1 секунду, и каждый раз, когда я нажимаю кнопку, обратный отсчет должен сбрасываться. Однако после первого нажатия кнопки следующий обратный отсчет сильно искажает интервал.

 var count;

function countdown() {
  count = 10;
  var repeat = setInterval(reduce, 1000);
}

function reduce() {
  if (count > 0) {
    document.getElementById('number').innerHTML = count;
    count--;
  } else {
    clearInterval(repeat);
  }
}  
 <html>
<head>
  <title>Page 4</title>
</head>
<body>
  <button style=" display: inline-block; " onclick="countdown()">Start Count Down</button>
  <div style=" display: inline-block;" id="number"></div>
</body>
</html>

Комментарии:

1. repeat это выходит за рамки clearInterval . Объявить repeat вне функции.

2. Или просто вызовите clearInterval(repeat); перед count = 10;

Ответ №1:

Вы можете использовать глобальную переменную repeat и сбросить ее, если она установлена, при вызове countdown .

 var count,
    repeat;

function countdown(){     
    count = 10;
    if (repeat) {
        clearInterval(repeat);
    }
    repeat = setInterval(reduce, 1000);     
}

function reduce() {
    if (count > 0) {
        document.getElementById('number').innerHTML = count;
        count--;
    } else {
        clearInterval(repeat);
    }
}  
 <button style=" display: inline-block; " onclick ="countdown()" >Start Count Down</button>
<div style="display: inline-block;" id="number"></div>

Ответ №2:

Ваша проблема — это repeat переменная, она определена и доступна только внутри countdown .
Вы могли бы просто сделать его глобальным, а затем вам пришлось бы очищать предыдущие интервалы при повторном нажатии кнопки

 var count, repeat;

function countdown() {
    clearInterval(repeat);
    count = 10;
    repeat = setInterval(reduce, 1000);
}

function reduce() {
    if (count > 0) {
        document.getElementById('number').innerHTML = count;
        count--;
    } else {
        clearInterval(repeat);
    }
}

СКРИПКА

Ответ №3:

поместите повтор снаружи, чтобы функция reduce могла получить к нему доступ

     var count;
    var repeat = null;
    function countdown(){

      count = 10;
      repeat = setInterval(reduce, 1000);


    }

    function reduce() {
      if(count > 0)
      {document.getElementById('number').innerHTML = count;
      count--;}
      else
      {clearInterval(repeat);}


    }

Ответ №4:

Вы также можете использовать this для остановки интервала;

 clearInterval(this)
  

 var count;

function countdown() {
  count = 10;
  var repeat = setInterval(reduce, 1000);
}

function reduce() {
  if (count > 0) {
    document.getElementById('number').innerHTML = count--;
  } else {
    clearInterval(this);
  }
}  
 <button style=" display: inline-block; " onclick="countdown()">Start Count Down</button>
<div style=" display: inline-block;" id="number"></div>

Это решит вашу проблему, но вызовет другую проблему. Если щелкнуть несколько раз, будет зарегистрировано несколько событий. Для этого вам следует либо отключить button, либо определить repeat в родительской области.

 var count, repeat;

function countdown() {
  count = 10;
  repeat = repeat || setInterval(reduce, 1000);
}

function reduce() {
  if (count > 0) {
    document.getElementById('number').innerHTML = count--;
  } else {
    clearInterval(this);
  }
}  
 <button style=" display: inline-block; " onclick="countdown()">Start Count Down</button>
<div style=" display: inline-block;" id="number"></div>

Вы заметите простой трюк:

 repeat = repeat || setInterval(reduce, 1000);

Это гарантирует, что несколько интервалов не будут зарегистрированы.