在JavaScript的世界里，定时器就像魔法师手中的魔杖，赋予了我们控制时间流动的能力，在这片代码的海洋中，有两个强大的工具——setTimeout()和setInterval()，它们以独特的方式为我们施展着时间的魔法。

1.setTimeout()

setTimeout()是一个定时函数，它会在指定的时间后执行一次回调函数，这就好比是一场精心安排的魔术表演，观众在特定的时间点才会看到魔术师的精彩表演。

示例代码：

function countdown(seconds) {
    setTimeout(() => {
        console.log("Countdown is over!");
    }, seconds * 1000);
}
// 使用setTimeout进行倒计时
countdown(5);

在这个例子中，我们定义了一个名为countdown的函数，它接受一个参数seconds，当这个函数被调用时，它会启动一个定时器，在seconds秒后执行内部的匿名函数，打印出“Countdown is over!”的消息，通过改变seconds的值，我们可以轻松调整倒计时的时间。

2.setInterval()

相比之下，setInterval()则更为频繁地施展它的魔法，它会在每次指定的间隔时间内执行同一个回调函数，想象一下，每隔一段时间，舞台上的魔术师都会带来新的惊喜。

示例代码：

function blinkLight() {
    document.body.style.backgroundColor = "red";
    setTimeout(() => {
        document.body.style.backgroundColor = "white";
    }, 1000);
}
// 使用setInterval使灯光闪烁
setInterval(blinkLight, 2000);

这里，我们创建了一个名为blinkLight的函数，它会改变页面背景颜色为红色，然后在1秒钟后恢复为白色，通过使用setInterval(blinkLight, 2000)，我们让这个过程每两秒重复一次，创造出闪烁的灯光效果。

相关问题解答

问题1：如何停止setTimeout()执行？

解答：要停止setTimeout()执行，你可以使用clearTimeout()方法，假设你有一个名为timerId的变量保存了setTimeout()返回的ID，那么你可以这样停止定时器：

const timerId = setTimeout(function() {
    console.log("This will only run once.");
}, 3000);
// 在适当的时候停止定时器
clearTimeout(timerId);

问题2：如何停止setInterval()执行？

解答：与setTimeout()类似，要停止setInterval()执行，同样使用clearTimeout()方法，但这次需要传递setInterval()返回的ID：

const intervalId = setInterval(function() {
    console.log("This runs every 2 seconds.");
}, 2000);
// 在适当的时候停止定时器
clearInterval(intervalId);

问题3：如何在页面加载完成后执行代码？

解答：通常情况下，你希望在页面完全加载完成后执行某些代码，而不是在页面开始加载时立即执行，这时可以利用window.onload事件，或者结合setTimeout()确保在DOM元素加载完毕后再执行代码：

window.onload = function() {
    // 页面加载完成后的代码
    console.log("Page is fully loaded.");
};
// 或者使用setTimeout确保DOM元素加载完毕后再执行
setTimeout(function() {
    // 确保在页面元素加载完成后执行
    console.log("DOM elements are loaded.");
}, 0);

通过这些简单的技巧，你可以在JavaScript的世界中灵活地控制时间，创造出各种动态的网页效果，无论是倒计时、定时刷新页面，还是实现复杂的交互逻辑，setTimeout()和setInterval()都是不可或缺的工具。