JavaScript中每x秒更改文档标题

Question

我希望能用JavaScript每秒更改HTML页面的标题。

首先，标题将是“Hold on。”，一秒钟后将变成“Hold on..”，然后再过一秒钟就会变成“Hold on...”。之后它必须不停地循环同样的事情。

我已经尝试过这个，但它没有起作用：

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

我希望你能帮助我。

- user11877466

---

使用 setInterval - Mike

Answer 1

setTimeout设置的是超时，而不是时间间隔。这意味着它只会运行一次。如果要设置时间间隔，您需要使用setInterval。

let dots = 1;
setInterval(() => {
    document.title = "Hold on" + ".".repeat(dots);
    dots++;
    if (dots > 3) dots = 1;
}, 1000);

- Тимофей Сосновский

---

这是我能写出来的最简单的代码（可行的），所以我接受了你的回复作为答案。谢谢！ - user11877466

Answer 2

使用setTimeout

setTimeout将事件添加到堆栈中。您的示例将尝试在1秒后立即调用每个事件。因此，您需要自行管理预期的执行时间：

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

循环setTimeout

如果需要使用setTimeout（无论出于什么原因），最好是递归调用一个函数并将其嵌入到timeout函数中。下面演示了这种方法：

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可以缓解一些时间管理问题，特别是如果需要按照规律顺序执行。以下演示了一个连续循环的间隔。

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 的一个区别是，间隔函数会一直执行，直到被停止。以下演示了如何在循环体内停止它：

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>

- Mike

---

之后它必须一遍又一遍地循环执行相同的操作，你读到这部分了吗？ - Anurag Srivastava

@AnuragSrivastava 所做的更改已经完成，评论也已删除 -- 感谢您提醒我。 - Mike

Answer 3

你可以使用递归函数来实现这个功能。

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

- Sohail Ashraf

Answer 4

我会这样做，让它立即执行：

var i = 0;
(function loop() {
  // Just for the demo
  document.body.innerHTML = "Hold on" + '.'.repeat(i+1);
  i = ++i % 3;
  setTimeout(loop, 1000);
})();

- blex

Answer 5

使用setInterval。

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

setInterval(() => {
    i = i % 3;
    document.title = titles[i];
    i++;
}, 1000);

- random