深入理解JavaScript事件机制

寻技术 JS脚本 / JAVA编程 2023年07月12日 119

如何实现一个事件的发布订阅

可以通过以下步骤实现 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等,在每个宏任务执行完成后会立即执行所有微任务队列中的任务,直到队列为空。

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

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

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

原文地址:https://blog.csdn.net/qq_34185872/article/details/130134027
关闭

用微信“扫一扫”