我在点击鼠标时得到了带有设置回调的画布:
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( 在画布上设置新侦听器这样的操作消耗了多少资源(就像我的情况一样(。也许我应该避开它?
谢谢!
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只是在循环中调用处理程序。因此,成本可以忽略不计。我会更关心处理人员本身的成本。