Блог

Главная - Вопросы по программированию - Как повторно обновлять содержимое , используя только JavaScript?

Как повторно обновлять содержимое , используя только JavaScript?

#javascript #html

#javascript #HTML

Вопрос:

На данный момент я хочу преобразовать этот код так, чтобы он не отображал значение i в полях запроса. Мне это нужно, чтобы повторно обновлять значение i внутри выделенного <div> . Это должно происходить каждую секунду, отсюда и задержка в цикле на 1000 мс. Как мне тогда преобразовать этот код?

 for(var i = 0; i > 10; i  ) {
    setInterval(alert(i),1000);
}

Мне нужно, чтобы это отображалось здесь:

 <div id="timer"></div>

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

1. Вы можете установить innerHTML свойство элемента в анонимной функции, выполняемой setInterval() функцией.

Ответ №1:

Используйте getElementById() для получения элемента.

Используйте innerHTML для настройки текстового содержимого.

Не используйте setInterval циклы in (если вы этого не хотите), потому что это приведет к обратному вызову, который вы передаете setInterval для выполнения n несколько раз за каждый тайм-аут.

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

 var el = document.getElementById("timer");
var i = 0;

var interval = setInterval(function() {
  el.innerHTML = i  ;
  if (i > 10) {
    clearInterval(interval);
  }
}, 1000);  
 <div id="timer"></div>

В качестве альтернативы используйте setTimeout и избегайте setInterval и clearInterval . Тогда вы можете просто не устанавливать новый тайм-аут, когда превышаете максимальное количество.

 var el = document.getElementById("timer");
var i = 0;

function counter() {
  el.innerHTML = i  ;
  if (i <= 10) {
    setTimeout(counter, 1000);
  }
}

counter();  
 <div id="timer"></div>

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

1. спасибо, теперь работает. Я использовал то, что вы говорите, но не таким же образом.