深入理解JavaScript事件机制

探讨如何构建事件发布与订阅机制

实现 JavaScript 发布-订阅模式可遵循以下流程：

初始化一个事件管理实例。

const eventManager = {
  events: {},
  subscribe: function (eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  publish: function (eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(function (callback) {
        callback(data);
      });
    }
  },
};

在涉及事件监听或触发的逻辑中调用该实例。

// 订阅事件
eventManager.subscribe('eventName', function (data) {
  console.log('收到了数据：', data);
});
// 发布事件
eventManager.publish('eventName', { name: 'test', age: 18 });

由此完成 JavaScript 环境下的发布-订阅架构搭建。

解析事件循环机制

JavaScript 事件循环是管理异步代码执行的核心机制，基于单线程模型，即仅有一个主线程负责处理所有任务。

代码执行期间，同步任务会被压入调用栈并按序执行至栈空。然而，JavaScript 也支持异步任务如 HTTP 请求或定时器，这些任务不会立即返回结果，而是在特定时刻完成。

为处理异步逻辑，JavaScript 引擎将其加入任务队列，待调用栈清空后执行队列中的下一项任务，此过程即为事件循环，通过不断从队列取任务执行来处理异步操作。

事件循环将任务划分为宏任务（macrotask）与微任务（microtask）。宏任务涵盖事件回调、定时器及 I/O 操作等，微任务包含 Promise 回调及其他需立即执行的任务。调用栈为空时，先执行所有已就绪的微任务，再从宏任务队列获取并执行一个任务。

宏任务与微任务的差异解析

在 JavaScript 中，宏任务与微任务均为异步代码执行方式，主要区别体现于任务队列的处理上。

宏任务（macrotask）通常指耗时较长的任务，如整段代码执行、setTimeout、setInterval 及 I/O 操作等，它们被放入宏任务队列等待执行，每个事件循环（event loop）中仅能执行一个宏任务。

微任务（microtask）通常指轻量级任务，包括 Promise 回调、MutationObserver 回调及 async/await 等，每个宏任务执行完毕后，会立即执行微任务队列中的所有任务直至队列为空。

执行事件循环时，若宏任务队列存在任务，则执行其首个任务，执行完毕后接着执行微任务队列中的所有任务，如此循环往复，直至宏任务与微任务队列均无任务。

因此，宏任务与微任务的区别在于执行顺序与优先级不同，微任务优先于宏任务执行。这是因为微任务执行后可能涉及渲染操作，若先执行宏任务，可能导致页面渲染延迟，引发卡顿。

简而言之，宏任务于下一次事件循环时执行，而微任务于当前事件循环末尾执行。这意味着微任务执行更快，且能在当前事件循环内处理重要任务。

至此，关于深入理解 JavaScript 事件机制的文章介绍完毕，更多相关 JS 事件机制内容请搜索本站历史文章或继续浏览下方相关文章，希望大家以后多多支持本站！