在 JavaScript 内每 x 秒更改一次文档标题
Change document title every x seconds in JavaScript
我想每秒更改 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);
希望你能帮帮我。
使用 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>
你可以使用递归函数来实现。
let dots = 0;
function holdOn() {
setTimeout(() => {
document.title = "Hold on" + (".".repeat(dots++));
if(dots > 3) dots = 0;
holdOn();
}, 1000);
}
holdOn();
我会这样做,让它立即执行:
var i = 0;
(function loop() {
// Just for the demo
document.body.innerHTML = "Hold on" + '.'.repeat(i+1);
i = ++i % 3;
setTimeout(loop, 1000);
})();
setTimeout
设置超时,而不是间隔。这意味着它只会 运行 一次。要设置间隔,您必须使用 setInterval
.
let dots = 1;
setInterval(() => {
document.title = "Hold on" + ".".repeat(dots);
dots++;
if (dots > 3) dots = 1;
}, 1000);
使用setInterval
.
const titles = ["Hold on.", "Hold on..", "Hold on..."];
let i = 0;
setInterval(() => {
i = i % 3;
document.title = titles[i];
i++;
}, 1000);
我想每秒更改 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);
希望你能帮帮我。
使用 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>
你可以使用递归函数来实现。
let dots = 0;
function holdOn() {
setTimeout(() => {
document.title = "Hold on" + (".".repeat(dots++));
if(dots > 3) dots = 0;
holdOn();
}, 1000);
}
holdOn();
我会这样做,让它立即执行:
var i = 0;
(function loop() {
// Just for the demo
document.body.innerHTML = "Hold on" + '.'.repeat(i+1);
i = ++i % 3;
setTimeout(loop, 1000);
})();
setTimeout
设置超时,而不是间隔。这意味着它只会 运行 一次。要设置间隔,您必须使用 setInterval
.
let dots = 1;
setInterval(() => {
document.title = "Hold on" + ".".repeat(dots);
dots++;
if (dots > 3) dots = 1;
}, 1000);
使用setInterval
.
const titles = ["Hold on.", "Hold on..", "Hold on..."];
let i = 0;
setInterval(() => {
i = i % 3;
document.title = titles[i];
i++;
}, 1000);