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

时间:2018-12-10 16:55:57

标签: javascript html5-canvas fabricjs

我在画布上单击鼠标时设置了回调:

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')
    })
});

我认为在触发按钮事件之后,永远不会调用第一个callback(),但是我错了:

首先触发回调A,

和第二个回调B

似乎回调A停留在某种队列中,直到它调用,然后才调用更改的回调。

所以我有三个问题:

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

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

3)在画布上设置新侦听器之类的操作消耗了多少资源(例如在我的情况下)。也许我应该避免它?

谢谢!

1 个答案:

答案 0 :(得分: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只会在循环中调用处理程序。因此,成本可以忽略不计。我会更担心处理程序本身的成本。