事件循环是JavaScript运行时核心机制，定时器和事件监听器均依赖其调度：setTimeout/setInterval将回调推入宏任务队列，DOM事件属宏任务，Promise.then属微任务，执行顺序为同步代码＞微任务＞宏任务。
事件循环是 JavaScript 运行时的核心机制，它让定时器和事件监听器得以协同工作——不是谁“驱动”谁，而是它们共同依赖事件循环调度执行。
定时器任务如何进入事件循环
setTimeout 和 setInterval 不是立即执行的函数，而是把回调推入宏任务队列（macrotask queue）。当调用它们时，JS 引擎记录延迟时间，等当前同步代码执行完、微任务清空后，事件循环才会在下一轮检查宏任务队列，把到期的定时器回调取出执行。
- setTimeout(fn, 0) 并不意味着“立刻执行”，实际至少要等一个事件循环周期（通常 > 1ms）
- setInterval 的回调若执行时间超过间隔值，后续调用会被跳过或堆积，不会并发执行
- 频繁创建未清理的定时器（如轮询中忘记 clearInterval）会持续占用内存和任务队列
事件监听器的触发与排队逻辑
用户交互（点击、输入）、页面生命周期（load、DOMContentLoaded）、DOM 变化等事件，由浏览器内核捕获后，将对应监听器回调作为宏任务或微任务加入队列。例如：
- click、scroll、resize 等 DOM 事件回调属于宏任务
- Promise.then()、MutationObserver 回调属于微任务，在每次宏任务结束后立即批量执行
- 同一个事件多次触发（如快速连点），回调会按触发顺序逐个入队，不会合并
定时器与监听器共存时的执行优先级
两者都受事件循环统一调度，但执行顺序取决于任务类型和时机：
- 同步代码 > 微任务 > 宏任务（含定时器回调、事件监听回调）
- 如果页面加载过程中同时注册了 load 监听器和 setTimeout(…, 0)，load 回调一定先于 setTimeout 执行（因为 load 是浏览器原生宏任务，且通常更早被加入队列）
- 用 requestAnimationFrame 替代 setInterval 做动画，能更好匹配屏幕刷新节奏，避免丢帧
实际开发中要注意的协同问题
定时器和事件监听器常需配合使用，但容易出错：
- 防抖场景：用户连续输入时，用 clearTimeout 清除前一个 setTimeout，只保留最后一次触发的处理
- 资源清理：在组件卸载或元素移除前，必须手动 removeEventListener 并 clearTimeout/clearInterval，否则造成内存泄漏
- 避免嵌套定时器：不要在 setInterval 回调里反复调用 setTimeout，易导致任务失控累积
