如何从设置的事件侦听器中删除过时的回调？

Question

我 canvas 设置了鼠标点击回调：

var canvas = new fabric.Canvas('canvas');
canvas.on('mouse:down', function (options) {
    console.log('it is a starting callback')
});

我还得到了更改另一个回调的按钮：

var btn = document.getElementById('btn');
btn.addEventListener('click', () => {
    canvas.on('mouse:down', function (options) {
        console.log('second callback')
    })
});

我以为在触发按钮事件后，第一个回调 () 将永远不会被调用，但我错了:

首先触发回调 A，

和第二个回调 B

似乎回调 A 一直在某种队列中，直到它被调用，然后才调用更改的回调。

所以我有三个问题：

1) 如何在触发前从队列中删除回调 A

2) 如何知道队列中有什么

3) 在 canvas 上设置新侦听器等操作会消耗多少资源（就像我的情况一样）。也许我应该避免它？

谢谢！

Answer 1

1) 使用 canvas.off()，传递 'mouse:down' 和对处理程序的引用。由于您使用匿名函数作为处理程序，因此您需要重构以使用命名函数，或者干脆删除所有侦听器：

const handler1 = function () {
  console.log('handler1')
}
// attach event listener
canvas.on('mouse:down', handler1)
// remove event listener
canvas.off('mouse:down', handler1)
// OR remove all 'mouse:down' listeners
canvas.off('mouse:down')

2) 在Fabric.js中，事件处理程序作为数组存储在Observable对象的__eventListeners 属性中：

const handler1 = function () {
  console.log('handler1')
}
canvas.on('mouse:down', handler1)
console.log(canvas.__eventListeners)
// or, more specifically
console.log(canvas.__eventListeners['mouse:down'])

3) 设置一个新的事件侦听器只是将一个新的处理程序推入所述数组。当事件被触发时，Fabric.js 只是循环调用处理程序。所以，成本可以忽略不计。我会更关心处理程序本身的成本。

如何从设置的事件侦听器中删除过时的回调？

How to remove obsolete callback from set event listener?

javascript

html5-canvas

fabricjs