每隔一秒钟在JavaScript中更改文档标题

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);

希望您能帮助我。

Answer 1

setTimeout设置超时，而不是间隔。这意味着它将只运行一次。要设置间隔，您必须使用setInterval。

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

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（无论出于何种原因），最好递归调用一个函数并将其嵌入到超时函数中。如下所示：

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>

Answer 3

您可以使用递归函数来实现。

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

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);
})();

Answer 5

使用setInterval。

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

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

Answer 6

setTimeout添加了事件堆栈，但将立即依次调用它们。您应该改用setInterval：

let period_count = 1;
setInterval(function(){ 
  document.title = "Hold on" + '.'.repeat(period_count++); 
}, 1000);

    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>