模糊加载中setInterval自动运行及int变量作用的技术疑问

我正在进行「50天50个JavaScript项目」练习，针对其中的模糊加载功能，有以下两个疑问：

1. 为何页面加载时，setInterval无需手动调用函数就能自动运行？
2. int变量与setInterval的具体工作机制是怎样的？

相关代码如下：

const int = setInterval(myCallback, 20);

function myCallback() {
  load++;
  if (load > 99) {
    clearInterval(int);
  }
}

问题1：为什么setInterval不用手动调用函数就自动运行？ #

setInterval是JavaScript的异步定时器API，它的设计逻辑就是：调用它的瞬间，就会触发定时器的启动流程。当页面加载执行到setInterval(myCallback, 20)这行代码时，浏览器会立即注册一个定时任务，按照你指定的20毫秒间隔，自动重复执行myCallback函数，不需要你额外手动去调用myCallback。

简单来说，setInterval的调用本身就是“启动定时器”的操作，不是单纯定义一个任务，调用后浏览器就会自动安排后续的执行。

问题2：int变量与setInterval的工作机制 #

setInterval的工作流程 #

当你执行setInterval(myCallback, 20)时，浏览器会完成这些操作：

• 在内部的定时器任务队列中，添加一个首次执行myCallback的任务，这个任务会在20毫秒后触发（如果主线程空闲的话）
• 每次myCallback执行完成后，浏览器会再次在20毫秒后安排下一次执行，循环往复
• 一旦调用clearInterval(int)，浏览器就会移除这个定时任务，停止后续的回调执行
• 注意：如果主线程在处理其他耗时操作，回调的执行可能会被延迟，间隔不是绝对精准的20毫秒

int变量的作用 #

setInterval调用后会返回一个唯一的定时器ID，这个ID被存在int变量里。它是浏览器用来区分不同定时器的标识——如果页面上同时有多个定时器，你需要通过这个ID告诉浏览器“要停止哪一个”。比如代码里当load超过99时，用clearInterval(int)传入这个ID，就能精准终止当前的模糊加载定时器，避免它继续执行。

内容的提问来源于stack exchange，提问作者jsnoob