JavaScript 计时事件

JavaScript 可以在设定的时间之后、或按固定的时间间隔去执行代码，这叫做计时事件（Timing Events）。它们定义在 window 对象上，最常用的是 setTimeout() 与 setInterval()，配合 clearTimeout()、clearInterval() 可以随时取消。轮播图、倒计时、广告延迟弹出等都靠它实现。

两种计时器对比

方法	行为	清除方法
setTimeout(fn, ms)	延迟 ms 毫秒后执行一次	clearTimeout(句柄)
setInterval(fn, ms)	每隔 ms 毫秒执行一次	clearInterval(句柄)

setTimeout：延迟执行一次

第一个参数是要执行的函数，第二个参数是延迟的毫秒数（1000 毫秒 = 1 秒）：

var timer = setTimeout(function () {
    console.log('2 秒后执行本行'); // 输出：2 秒后执行本行
}, 2000);
clearTimeout(timer); // 在触发之前调用可取消
console.log('定时器已取消'); // 输出：定时器已取消

setInterval：每隔一段时间重复执行

setInterval 会一直重复下去，通常用一个变量保存句柄，便于将来停止：

var count = 0;
var clock = setInterval(function () {
    count++;
    console.log('第 ' + count + ' 次');
    if (count >= 3) {
        clearInterval(clock); // 计数到 3 就停止
    }
}, 1000);
// 输出：第 1 次（1 秒后）→ 第 2 次 → 第 3 次，随后定时器被清除

综合示例：数字倒计时

把两个方法结合起来，写一个从 10 倒数到 0 的倒计时（放浏览器控制台运行）：

var num = 10;
var t = setInterval(function () {
    console.log('倒计时：' + num);
    num--;
    if (num < 0) {
        clearInterval(t);
        console.log('时间到！'); // 输出：时间到！
    }
}, 1000);
// 输出：倒计时：10 → 倒计时：9 → …… → 倒计时：0 → 时间到！

注意事项

• 毫秒数只是"最短间隔"的保证，实际执行可能略晚（主线程忙时会排队），不要用它做精确计时。
• 非严格模式下，定时器回调里的 this 指向 window；需要外部对象时，用箭头函数或先把 this 存下来。
• 不需要的定时器要及时清除（clearTimeout / clearInterval），避免页面关闭后残留浪费内存。

小结：setTimeout 只执行一次、setInterval 反复执行，保存返回值作句柄，再配合 clear 方法即可随时停止。实现轮播、倒计时等定时需求时，记得在合适的时机清理定时器。