Question

我有以下问题：

我试图在JavaScript中实现回调。现在我只使用一个全局变量来保存我的callbacl函数。这是一个例子：

_callbackFkt = null;

requestCompleted = function(oControlEvent) {
    console.log("Callback: " + _callbackFkt.toString());
};

myLibRequest = function(callback) {
    // some code, which is attached to the requestComplete event when ready
    _callbackFkt = callback;
};

现在我尝试调用使用回调的函数：

myLibRequest(function () {
    // callback function 1
});
myLibRequest(function () {
    // callback function 2
});
myLibRequest(function () {
    // callback function 3
});

控制台中的结果是：

Callback: function () {
    // callback function 3
}

如何定义要绑定到一个函数调用而不是全局可用的回调？我想要结果：

Callback: function () {
    // callback function 1
}
Callback: function () {
    // callback function 2
}
Callback: function () {
    // callback function 3
}

Answer 1

有几种方法可以执行您要执行的操作，但您的基本问题是您需要一个事件处理程序列表，但您只需指定一个值。

修改您当前正在做的事情：

_callbackFkts = [];

myLibRequest = function(callback) {
  // some code, which is attached to the requestComplete event when ready
  _callbackFkts.push(callback);
};

然后，当你想执行回调时：

_callbackFkts.forEach(function(callbackFkt) {
  callbackFkt();
});

但是，这种全球机制有点混乱。你可能会考虑一些封装（未经测试，但你明白了）：

function Events() {
  this.callbacks = [];
}

Events.protototype.bind = function(callback) {
  this.callbacks.push(callback);
};

Events.prototype.executeAll = function(params) {
  this.callbacks.forEach(function(callback) {
    callback.apply(this, params);
  }
}

然后你可以像这样使用它：

var events = new Events();

events.bind(function() {
  //callback function 1
});

events.bind(function() {
  //callback function 2
});

events.bind(function() {
  //callback function 3
});

events.executeAll('with', 'parameters');

最后，您可能只使用现成的事件库。有很多。一个快速谷歌搜索找到this。

Answer 2

只有myLibRequest()只包含同步代码（假设它不包含），才能使用全局作为回调。

删除全局，并使用作为参数传入的callback。

假设你有一些异步调用，并在完成后调用requestCompleted。添加一个参数，以便requestCompleted接收回调，而不是引用全局。

requestCompleted = function(oControlEvent, callback) {
    console.log("Callback: " + callback.toString());
};

myLibRequest = function(callback) {
    myAsyncFunction(function(){
        // async complete
        requestCompleted('event', callback);
    });
};

如何使我的JS回调正常工作？

2 个答案: