Изменить заголовок документа каждые x секунд в JavaScript - PullRequest
Новая
       32

Изменить заголовок документа каждые x секунд в JavaScript

3 голосов
/ 14 марта 2020

Я хочу менять заголовок моей HTML страницы каждую секунду с помощью JavaScript.

Сначала заголовок будет «Hold on.», Через одну секунду он будет «Hold on .. "и затем через одну секунду" Держись ... ". После этого мне приходится повторять одно и то же снова и снова

Я уже пробовал это, но это не сработало: 

setTimeout(() => { document.title = "Hold on."; }, 1000);
setTimeout(() => { document.title = "Hold on.."; }, 1000);
setTimeout(() => { document.title = "Hold on..."; }, 1000);

Надеюсь, вы мне поможете.

Ответы [ 5 ]

4 голосов

setTimeout устанавливает время ожидания, а не интервал. Это означает, что он будет работать только один раз. Чтобы установить интервалы, вы должны будете использовать setInterval. 

let dots = 1;
setInterval(() => {
    document.title = "Hold on" + ".".repeat(dots);
    dots++;
    if (dots > 3) dots = 1;
}, 1000);
1 голос
/ 14 марта 2020

Использование setTimeout

setTimeout добавляет событие в стек. И ваш пример будет пытаться вызвать каждый сразу после 1 с. Итак, вам нужно самостоятельно управлять предполагаемым временем выполнения: 

setTimeout(() => { document.title = "Hold on."; }, 1000);
setTimeout(() => { document.title = "Hold on.."; }, 2000);  // <-- increase
setTimeout(() => { document.title = "Hold on..."; }, 3000); // <-- increase

Looping setTimeout

Если требуется setTimeout (по любой причине), лучше вызвать рекурсивно функция и встроить это в функцию тайм-аута. Это показано ниже: 

let time = 0;
loop(time);

function loop(time){
  setTimeout(() => { 
    message.textContent = "Hold on" + '.'.repeat(time%3+1); 
    loop(time+=1000)        // <-- recursive call that also increments time
  }, 1000);
}
<div id="message"></div>

Использование setInterval

setInterval устраняет некоторые проблемы управления временем, особенно если выполнение должно происходить в регулярной последовательности , Ниже показан непрерывный интервал l oop. 

let period_count = 0;
setInterval(function() {
  let message = 'Hold on' + '.'.repeat( period_count++%4 );
  document.querySelector('#message').textContent = message;
}, 1000);
<div id="message"></div>

Прекращение выполнения

Разница между setInterval и setTimeout заключается в том, что интервал будет выполняться до его остановки. Ниже показано, как его можно остановить с помощью тела l oop: 

let period_count = 1;
let interval = setInterval(function() {
  if ((period_count) == 3)
    clearInterval(interval)

  let message = 'Hold on' + '.'.repeat(period_count++);
  document.querySelector('#message').textContent = message;
}, 1000);
<div id="message"></div>
0 голосов
/ 14 марта 2020

использование setInterval. 

const titles = ["Hold on.", "Hold on..", "Hold on..."];
let i = 0;

setInterval(() => {
    i = i % 3;
    document.title = titles[i];
    i++;
}, 1000);
0 голосов
/ 14 марта 2020

Я бы сделал это так, чтобы он сразу же запустился: 

var i = 0;
(function loop() {
  // Just for the demo
  document.body.innerHTML = "Hold on" + '.'.repeat(i+1);
  i = ++i % 3;
  setTimeout(loop, 1000);
})();
0 голосов
/ 14 марта 2020

Вы можете использовать рекурсивную функцию для достижения этой цели. 

let dots = 0;
function holdOn() {
  setTimeout(() => { 
    document.title = "Hold on" + (".".repeat(dots++)); 
    if(dots > 3)  dots = 0;
    holdOn();
  }, 1000);
}
holdOn();
...