理解`setInterval`非立即执行特性及实现立即执行的方法
在JavaScript中，`setInterval`是一个非常常用的函数，它允许你按照指定的时间间隔重复调用一个函数或执行一段代码，一个常见的误解是关于`setInterval`的执行时机——它并不会立即执行指定的函数，而是从指定的时间间隔后开始，每隔这段时间执行一次，这种设计是为了满足需要周期性执行任务的场景，比如动画、轮询数据等。
#### `setInterval`的基本用法
`setInterval`函数接受两个参数：第一个参数是要周期性执行的函数或要执行的代码字符串（尽管使用字符串作为参数已不推荐，因为它会进行`eval()`操作，这既不安全也影响性能），第二个参数是时间间隔（以毫秒为单位），函数返回一个间隔ID，该ID可用于之后通过`clearInterval`函数取消定时器。
let intervalId = setInterval(function() {
console.log("这段代码每隔1000毫秒执行一次");
}, 1000);
// 取消定时器
// clearInterval(intervalId);
#### `setInterval`非立即执行的原因
`setInterval`设计为不立即执行的原因主要是基于其设计初衷——提供一个简单的方式来重复执行某个任务，而不是立即执行加重复执行，如果需要在开始时立即执行一次，然后按照指定间隔重复执行，那么应该使用其他方法或结合`setInterval`来实现。
#### 实现立即执行的方法
虽然`setInterval`本身不支持立即执行，但我们可以通过一些技巧来达到这个目的，以下是几种实现方式：
##### 1. 调用函数后立即使用`setInterval`
最直接的方法是先手动调用一次函数，然后设置`setInterval`来重复调用。
function repeatTask() {
console.log("执行任务");
}
// 立即执行
repeatTask();
// 然后每隔1000毫秒执行一次
setInterval(repeatTask, 1000);
##### 2. 使用`setTimeout`和`setInterval`结合
如果你想要更灵活的控制（比如，在第一次执行和后续执行之间有不同的时间间隔），可以使用`setTimeout`来立即执行一次，然后使用`setInterval`来重复执行。
function repeatTask() {
console.log("执行任务");
}
// 立即执行
setTimeout(function() {
repeatTask();
// 设置定时器，每隔1000毫秒执行一次
setInterval(repeatTask, 1000);
}, 0); // 这里的0毫秒表示尽快执行，但仍然是异步的
虽然`setTimeout`的延迟设置为0毫秒，但它仍然会被放入JavaScript的事件循环中，等待当前执行栈清空后才会执行，因此它不会阻塞后续代码的执行。
##### 3. 封装一个函数来同时处理立即执行和重复执行
为了代码的复用和整洁，可以封装一个函数来同时处理立即执行和重复执行的需求。
function repeatWithInitialCall(func, interval) {
func(); // 立即执行
return setInterval(func, interval); // 返回间隔ID以便后续可能取消
}
// 使用
let intervalId = repeatWithInitialCall(function() {
console.log("执行任务");
}, 1000);
// 取消定时器（如果需要）
// clearInterval(intervalId);
#### 注意事项
- 使用`setInterval`时，需要注意内存泄漏问题，如果定时器不再需要，应该使用`clearInterval`来取消它，以避免不必要的资源消耗。
- 在某些情况下，如果定时器执行的函数执行时间过长，可能会与下一个定时器的执行时间重叠，导致函数被连续调用多次，这种情况下，可能需要考虑使用`setTimeout`在函数执行完毕后重新设置定时器，或者使用其他机制（如`requestAnimationFrame`）来更精细地控制动画或任务的执行。
虽然`setInterval`本身不支持立即执行，但通过一些简单的技巧，我们可以很容易地实现立即执行加重复执行的需求，在实际开发中，根据具体场景选择合适的实现方式是非常重要的。
