在 JavaScript 内每 x 秒更改一次文档标题

Question

我想每秒更改 HTML 页面的标题 JavaScript。

首先标题将是 "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

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

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

循环设置超时

如果需要 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的一个区别是interval会一直执行直到停止。下面演示了如何从 w/in 循环体中停止它：

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 2

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

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

Answer 3

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

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

Answer 4

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

let dots = 1;
setInterval(() => {
    document.title = "Hold on" + ".".repeat(dots);
    dots++;
    if (dots > 3) dots = 1;
}, 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);

在 JavaScript 内每 x 秒更改一次文档标题

Change document title every x seconds in JavaScript

javascript

html

title

page-title

使用 setTimeout

循环设置超时

使用 setInterval

停止执行