深入理解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 代码在执行时，它会将同步任务添加到调用栈中，并按照顺序依次执行，直到调用栈为空。但是，JavaScript 还支持处理异步任务，例如 HTTP 请求、定时器等等。这些异步任务不会立即返回结果，而是在某个时间点才会完成。

为了处理异步任务，JavaScript 引擎会将它们添加到任务队列中，并在调用栈为空后开始执行队列中的下一个任务。这个过程就是事件循环。事件循环通过不断地从任务队列中取出任务并执行来处理异步操作。

在事件循环中，任务被分为两类：宏任务（macrotask）和微任务（microtask）。宏任务包括事件回调、定时器回调和 I/O 操作等，而微任务则包括 Promise 的回调函数及其它一些需要立即执行的任务。当调用栈为空时，事件循环首先会执行所有已经准备好的微任务，然后再从宏任务队列中获取一个任务并执行。

宏任务和微任务的区别

在 JavaScript 中，宏任务和微任务都是异步代码执行的方式,主要体现在任务队列中。

宏任务（macrotask）通常是一些较为耗时的任务,包括整块代码的执行、setTimeout、setInterval、I/O 操作等任务。它们会被放入宏任务队列中等待执行,在每个事件循环（event loop）中，只有一个宏任务可以被执行。

微任务（microtask）通常是一些较为轻量的任务,包括 Promise 的回调函数、MutationObserver 的回调函数、async/await等，在每个宏任务执行完成后会立即执行所有微任务队列中的任务，直到队列为空。

在执行事件循环时，如果宏任务队列中有任务，就会执行宏任务队列中的第一个任务，执行完后再执行微任务队列中的所有任务。这样来回循环，直到宏任务和微任务队列中都没有任务为止。

因此，宏任务和微任务的区别在于执行顺序和优先级不同，微任务会优先于宏任务执行。这是因为微任务执行完之后可能会有一些渲染的操作，如果先执行宏任务，可能会导致页面的渲染不及时，出现页面卡顿的情况。

简单来说，宏任务在下一次事件循环时执行，而微任务在当前事件循环的末尾执行。这就意味着微任务可以更快地执行，并且可以在当前事件循环内处理一些重要的任务。

到此这篇关于深入理解JavaScript事件机制的文章就介绍到这了,更多相关JS事件机制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！