setTimeout和setInterval介绍

setTimeout 和 setInterval 介绍

在 JavaScript 中，setTimeout 和 setInterval 是两个非常常用的定时器函数，用于在指定的时间间隔后执行某个回调函数。它们都使用异步方式执行任务，即它们不会阻塞主线程，而是将任务安排在事件队列中等待执行。

1. setTimeout() - 延迟执行

功能：

setTimeout() 用于在指定的延迟时间后执行一次指定的回调函数。

语法：

setTimeout(callback, delay, [arg1, arg2, ...]);

• callback：回调函数，指定延迟执行的代码。
• delay：延迟时间，单位是毫秒（1秒 = 1000毫秒）。即延迟多少毫秒后执行回调函数。
• [arg1, arg2, ...]：可选参数，传递给回调函数的参数。

特点：

• setTimeout() 只会执行回调函数 一次，在指定的延迟时间过后。
• 如果设置的延迟时间为 0，回调函数会尽量在当前执行栈清空后立即执行（不过它依赖于浏览器的调度机制，不一定是立刻执行）。

示例：

console.log("开始");

setTimeout(function() {
    console.log("这是延迟执行的回调函数");
}, 2000);  // 延迟2秒执行

console.log("结束");

执行流程：

1. "开始" 会立即打印。
2. setTimeout 设置了一个 2 秒后的回调函数。
3. "结束" 会立即打印。
4. 2 秒后，回调函数打印 "这是延迟执行的回调函数"。

输出：

开始
结束
这是延迟执行的回调函数

2. setInterval() - 定期执行

功能：

setInterval() 用于按照指定的时间间隔重复执行回调函数。它会一直定期执行回调函数，直到被清除。

语法：

setInterval(callback, interval, [arg1, arg2, ...]);

• callback：回调函数，指定要定期执行的代码。
• interval：时间间隔，单位是毫秒（1秒 = 1000毫秒）。即回调函数每隔多少毫秒执行一次。
• [arg1, arg2, ...]：可选参数，传递给回调函数的参数。

特点：

• setInterval() 会 重复 执行回调函数，直到调用 clearInterval() 停止。
• 如果间隔时间过小（例如 0 毫秒），可能会因为主线程的任务积压而导致不准确的执行时机。

示例：

let counter = 0;

const intervalId = setInterval(function() {
    console.log("每秒执行一次", counter++);
    if (counter >= 5) {
        clearInterval(intervalId);  // 停止定时器
    }
}, 1000);  // 每1000毫秒（1秒）执行一次回调

执行流程：

1. 每秒钟打印一次 "每秒执行一次" 和 counter 的值。
2. 当 counter 达到 5 时，调用 clearInterval() 停止定时器。

输出：

每秒执行一次 0
每秒执行一次 1
每秒执行一次 2
每秒执行一次 3
每秒执行一次 4

setTimeout() vs setInterval()

clearTimeout() 和 clearInterval()

这两个函数用于停止 setTimeout() 和 setInterval() 设置的定时器。

clearTimeout()

clearTimeout() 用来停止由 setTimeout() 设置的定时器。

let timer = setTimeout(() => {
    console.log("这不会被执行");
}, 5000);

clearTimeout(timer);  // 取消定时器

clearInterval()

clearInterval() 用来停止由 setInterval() 设置的定时器。

let interval = setInterval(() => {
    console.log("这每秒执行一次");
}, 1000);

clearInterval(interval);  // 停止定时器

常见应用场景

setTimeout() 用法：

• 延迟执行代码：

  • 在 3 秒后执行某个函数：

    setTimeout(() => {
        console.log("3秒已过");
    }, 3000);
    

• 延迟显示信息：

  • 页面加载 2 秒后显示提示消息：

    setTimeout(() => {
        alert("页面加载完成");
    }, 2000);
    

setInterval() 用法：

• 定期更新页面内容：

  • 每秒更新页面上的时间：

    setInterval(() => {
        let time = new Date().toLocaleTimeString();
        document.getElementById("clock").textContent = time;
    }, 1000);
    

• 轮询请求：

  • 每隔 5 秒钟向服务器发送一次请求：

    setInterval(() => {
        fetch('/api/refresh')
            .then(response => response.json())
            .then(data => console.log(data));
    }, 5000);
    

总结：

• setTimeout() 用于延迟执行一次回调函数。
• setInterval() 用于定期重复执行回调函数，直到明确调用 clearInterval() 停止。
• clearTimeout() 和 clearInterval() 用于停止已设置的定时器。

如果你希望执行一次延迟操作，使用 setTimeout()；如果需要定期执行某个操作，使用 setInterval()。