javascript - chrome javascript事件处理问题

Question

我遇到了在 google chrome 中同时调用多个事件处理程序的问题。以下代码在发生书签创建事件时触发 eventHandler 函数。

chrome.bookmarks.onCreated.addListener(eventHandler);

当创建多个书签时，例如通过将几个书签栏链接从 Firefox 拖动到 Chrome，多个 eventHandler 函数会同时运行，从而导致不良效果。我需要确保一次只有一个 eventHandler 实例正在运行，并且事件按照先到先得的原则进行处理。 javascript 有没有办法确保这一点？

Answer 1

正如 Jakub 所说，异步事件处理是 JavaScript 的优点之一。我建议重新考虑您的应用程序流程以支持这一点，而不是尝试序列化它。此外，我们不会向您保证事件触发的顺序就是您期望它们触发的顺序。拖动多个书签可能会以任意顺序生成事件。

如果您确实需要确保您的程序按事物进入的顺序处理事物，并且一次只处理一项，您可以将逻辑分为两部分:eventHandler 本身可以是一个填充您需要以某种方式处理的事件队列的函数，并且您可以有另一个在超时驱动的循环中运行的函数，检查队列，拉出一个项目并处理它。类似以下(未经测试)的代码:

function SerializedEventHandler() {
  chrome.bookmarks.onCreated.addListener(this.enqueue.bind(this));
}

SerializedEventHandler.prototype = {
  queue_: [],

  timer_: null,

  enqueue: function (e) {
    this.queue_.push(e);
    this.startProcessing();
  },

  startProcessing: function () {
    if (!this.timer_)
      this.timer_ = setTimeout(this.process.bind(this), 100);
  },

  process: function () {
    if (this.queue_.length) {
      var item = this.queue_.shift();
      // do something with `item`
      this.timer_ = clearTimeout(this.timer_);
      this.startProcessing();
    }
  }
};

这有意义吗？