为已发出的事件创建侦听器时的闭包问题
Closure issue with creating listeners for emitted events
我实现了一个对象,它封装了一个与外部设备交互的驱动程序。当驱动程序接收到数据时,它会发出一个事件。
当我启动时,我会加载一个所有已定义驱动程序的列表。然后我迭代定义以执行以下操作:
- 创建驱动程序实例
- 倾听驾驶员的事件,以及
- 告诉驱动程序连接
作为所发射事件的监听器的一部分,我定义了一个函数,该函数传递了有关设备所代表内容的一些细节。
但是,我的代码似乎有问题。当驱动程序发出事件时,触发的函数只显示一组详细信息。这些细节是在for循环中定义的最后一个细节,我在其中创建驱动程序并侦听事件。
我创建了一个测试示例,通过使用几个简单的对象和一个计时器来重现我的问题。这需要在node.js中运行才能发现问题。
var EventEmitter = require('events').EventEmitter;
var util = require('util');
// define vehicle object
function Vehicle(options) {
options = options || {};
this.id = ((options.id != null) ? options.id : -1);
this.name = ((options.name != null) ? options.name : 'unknown');
}
util.inherits(Driver, EventEmitter);
// define driver object
function Driver(options) {
options = options || {};
this.id = ((options.id != null) ? options.id : -1);
this.name = ((options.name != null) ? options.name : 'unknown');
}
Driver.prototype.startTimer = function(delay) {
self = this;
console.log('starting timer for ' + self.name + ' with a delay of ' + delay);
setTimeout(function() {
console.log('firing timer for ' + self.name);
self.emit('timer', 'some data');
}, delay);
}
// function to create listener
function makeOnTimerFunction(driver, vehicle) {
console.log("creating function for d name : " + driver.name + ' d id: ' + driver.id + ' v id: ' + vehicle.id + ' v name: ' + vehicle.name);
return function(d) {
console.log(" d name: " + driver.name + ' d id: ' + driver.id + ' v id: ' + vehicle.id + ' v name: ' + vehicle.name + ' d: ' + d);
}
}
var vehicles = new Array();
vehicles.push(new Vehicle({id: 1001, name: 'Max'}));
vehicles.push(new Vehicle({id: 1002, name: 'Cheif'}));
vehicles.push(new Vehicle({id: 1003, name: 'Seigfreid'}));
var driver = null;
for (var i = 0; i < 3; i++) {
driver = new Driver({
id: vehicles[i].id,
name: vehicles[i].name,
});
driver.on('timer', makeOnTimerFunction(driver, vehicles[i]));
driver.startTimer(1000 * i);
}
```
我得到的输出如下:
creating function for d name : Max d id: 1001 v id: 1001 v name: Max
starting timer for Max with a delay of 0
creating function for d name : Cheif d id: 1002 v id: 1002 v name: Cheif
starting timer for Cheif with a delay of 1000
creating function for d name : Seigfreid d id: 1003 v id: 1003 v name: Seigfreid
starting timer for Seigfreid with a delay of 2000
firing timer for Seigfreid
d name: Seigfreid d id: 1003 v id: 1003 v name: Seigfreid d: some data
firing timer for Seigfreid
d name: Seigfreid d id: 1003 v id: 1003 v name: Seigfreid d: some data
firing timer for Seigfreid
d name: Seigfreid d id: 1003 v id: 1003 v name: Seigfreid d: some data
我期望看到的是:
creating function for d name : Max d id: 1001 v id: 1001 v name: Max
starting timer for Max with a delay of 0
creating function for d name : Cheif d id: 1002 v id: 1002 v name: Cheif
starting timer for Cheif with a delay of 1000
creating function for d name : Seigfreid d id: 1003 v id: 1003 v name: Seigfreid
starting timer for Seigfreid with a delay of 2000
firing timer for Max
d name: Max d id: 1001 v id: 1001 v name: Max d: some data
firing timer for Chief
d name: Chief d id: 1002 v id: 1002 v name: Chief d: some data
firing timer for Seigfried
d name: Seigfreid d id: 1003 v id: 1003 v name: Seigfreid d: some data
问题是计时器总是引用最后一个名为Seigfreid的对象。
----编辑----
只是为了澄清问题,问题似乎与makeOnTimerFunction
函数有关。它返回的函数是在事件发生时激发的函数。当调用makeOnTimerFunction
时,所有变量都有意义。然而,当事件触发并且调用makeOnTimerFunction
返回的函数时,变量总是相同的。它们并不反映首次调用makeOnTimerFunction
时的值。
以下是您的问题:
Driver.prototype.startTimer = function(delay) {
self = this; <----
您实际上创建了一个全局变量self
,每次运行startTimer
方法时都会覆盖它。最后,它将被覆盖,从而指向最后一个驱动程序实例,从而产生意外结果。
解决方案:使用var
创建一个新的变量,作用域为方法:
Driver.prototype.startTimer = function(delay) {
var self = this;
相关文章:
- Highslide(iframe的侦听器)
- 如何在for循环中添加事件侦听器
- 选项卡侦听器未被来自后台脚本的消息激活
- 未命中服务器发送的事件侦听器
- 如何覆盖原型中的事件侦听器
- 加载侦听器上的函数触发得太早
- 无法将事件侦听器附加到画布
- 如何在d3.js中自定义事件侦听器
- 在es6中,将带有回调的事件侦听器设置为可迭代的
- 事件侦听器未在chrome扩展中的options.js中启动
- IE8更改文本区域上的事件侦听器不工作
- 将事件侦听器添加到文档,而不是签入元素存在,然后添加事件侦听器
- jQuery将侦听器的大小调整为只触发宽度的变化
- javascript删除事件侦听器
- 不能使用闭包作为pushState的事件侦听器
- 循环中的闭包:在循环中声明的变量在绑定事件侦听器时未正确预设到处理程序函数中
- Javascript infovis工具包(JIT)在HyperTree中添加边缘事件侦听器
- 为已发出的事件创建侦听器时的闭包问题
- 使用Google Maps v3中的一个变量(循环、闭包)将事件侦听器附加到一组标记上
- 如果附加的函数是闭包,如何删除事件侦听器