javascript - 为任何事件处理程序仅触发一次绘制

Question

我有一个相当复杂的 JavaScript 单页应用程序，它有一个主画布，需要重新绘制以响应用户的各种输入。许多事件被注册到各种 DOM 元素中，每个这样的事件都有可能触发draw(). 目前，我只是draw()在有需要触发它的条件时执行，但这往往会导致draw()同一事件快速连续发生多个调用。

有什么模式或机制可以用来解决这个问题吗？
理想情况下，我希望触发条件只设置一个标志，如果设置了标志，则在事件处理结束时进行抽奖。手动执行此操作需要修改数十个注册事件

标签： javascript

Answer 1

我认为这样的模式应该可以解决问题。

EventTarget.prototype.addEventListenerRunOnce = function(name, callback) {
    const eventWrapper = (event) => {
        this.removeEventListener(name, eventWrapper);
        callback(event);
    };

    this.addEventListener(name, eventWrapper);
};