JS中SetInterval与setTimeout深度解析

"本文主要介绍了JavaScript中的两种定时器方法——`setTimeout`和`setInterval`，包括它们的用法、区别以及如何清除已设置的定时器。" 在JavaScript中，`setTimeout`和`setInterval`是两个非常重要的全局函数，它们都属于`window`对象，用于实现延迟执行或周期性执行代码。`setTimeout`用于一次性延迟执行某个函数或代码块，而`setInterval`则用于周期性地重复执行。 1. `setTimeout(function, delay)`： - `function` 是要延迟执行的函数，可以直接传递函数名，或者使用字符串形式的函数调用（不推荐，因为不利于代码维护和压缩）。 - `delay` 是延迟的时间，以毫秒为单位，表示函数将在指定的延迟后执行。 示例： ```javascript function hello() { alert("Hello!"); } setTimeout(hello, 2000); // 2秒后执行hello函数 ``` 或者使用字符串形式： ```javascript setTimeout("alert('Hello!')", 2000); // 不推荐，不利于代码维护 ``` 2. `setInterval(function, interval)`： - `function` 是要周期性执行的函数，与`setTimeout`相同。 - `interval` 是间隔时间，以毫秒为单位，表示函数会每隔这个时间间隔重复执行。 示例： ```javascript function countdown() { console.log("Countdown: " + (--counter)); if (counter > 0) { setTimeout(countdown, 1000); // 使用setTimeout模拟setInterval，避免微任务导致的执行顺序问题 } } let counter = 5; countdown(); // 每隔1秒打印倒计时 ``` 或者传统方式： ```javascript setInterval(function() { console.log("Periodic message"); // 每隔1秒打印周期消息 }, 1000); ``` 3. 清除定时器： - `clearTimeout(timerId)` 用于清除由`setTimeout`创建的定时器，防止代码意外执行。 - `clearInterval(timerId)` 用于清除由`setInterval`创建的定时器，停止周期性执行。 示例： ```javascript let timeoutId = setTimeout(function() { console.log("Timeout occurred"); }, 3000); clearTimeout(timeoutId); // 清除定时器，阻止"Timeout occurred"的打印 let intervalId = setInterval(function() { console.log("Interval triggered"); }, 1000); clearInterval(intervalId); // 停止周期性打印 ``` 需要注意的是，`setInterval`执行的函数可能会受到其他JavaScript任务的影响，如事件循环中的微任务和宏任务，可能导致实际执行间隔与预期不同。为了得到更精确的周期执行，有时会用多个`setTimeout`来模拟`setInterval`的行为。 `setTimeout`适合用来执行一次性延迟的任务，而`setInterval`则适用于需要定期重复执行的情况。在使用过程中，根据具体需求选择合适的方法，并记得在不再需要定时器时及时清除，以优化性能并避免内存泄漏。