修改回調函數的參數數量-javascript

Question

我知道你們中許多人已經使用過JavaScript UI小部件插件等...，它們提供了回調函數。 例如，我們有Object x並且它具有一個函數，比如說.doThisAfterAnEvent() 。 根據Object x的官方文檔，該函數接受帶有一個參數的function()類型的單個參數，假設_args 。

為了可視化，下面是示例：

var handler = function(_args) {
    // Do something.
}

var x = $("#element-to-widget-ify").transform()
x.doThisAfterAnEvent(handler)

我的問題是，如何修改方法.doThisAfterAnEvent()以接受具有兩個或多個參數而不是一個的函數？ 在這種情況下，我需要向handler函數傳遞第二個額外的值。

---

編輯：

var widgets = {
    "widget-at-the-nav": $("#nav-widget").transform(),
    "widget-at-the-footer": $("#nav-footer").transform(),
    "widget-at-the-search": $("#nav-search").transform(),
    length: 3
}

var handler = function(_args, _option) {
    console.log("key in: " + _option
    // Other processes...
}

for(key in widgets) {
    console.log("key outer: " + key)
    widget[key].doThisAfterAnEvent(function(json) {
        console.log("key out: " + key)
        handler(json, key)
    })
}

這是我的嘗試。 但它的打印結果如下：

key outer: widget-at-the-nav
key outer: widget-at-the-footer
key outer: widget-at-the-search
key out: widget-at-the-nav
key in: widget-at-the-nav
key out: widget-at-the-nav
key in: widget-at-the-nav
key out: widget-at-the-nav
key in: widget-at-the-nav

而且我忘了告訴大家，函數.doThisAfterAnEvent() （不是handler()函數）內部具有AJAX調用。

Answer 1

如果您這樣詢問，我想您的意思是，在調用doThisAfterAnEvent的那一刻，您已經知道處理程序的一個參數超過兩個。

在這種情況下，解決方案是將您的處理程序帶有兩個參數的包裝到一個匿名函數中，該函數僅接受一個參數，然后回調您的處理程序：

x.doThisAfterAnEvent(function(_arg) { handler(myKnownArg, _arg) });

Answer 2

這個問題是一團糟，所以我只涉及最新的編輯及其包含的代碼。

您使用匿名函數屏蔽處理程序的方法是非常正確的，只是您的循環弄亂了您的詞法范圍。 AJAX位是一個非常重要的細節，因為任何AJAX調用都很可能在循環后很長時間才能運行，這意味着這些回調函數都將引用相同的key最終值。

您需要創建一個新的作用域，在該作用域中，鍵被“鎖定”，以便引用正確。

 function Con () {} Con.prototype.doThisAfterAnEvent = function (fn) { // Fake some AJAX programming window.setTimeout(function () { fn.call(this); }, 1500); }; $.fn.transform = function () { return new Con(); }; var widgets = { "widget-at-the-nav": $("#nav-widget").transform(), "widget-at-the-footer": $("#nav-footer").transform(), "widget-at-the-search": $("#nav-search").transform() }; var handler = function(_args, _option) { console.log("key in: " + _option); // Other processes... }; for (var key in widgets) { console.log("key outer: " + key); (function (key) { // Use an IIFE to establish a new lexical scope widgets[key].doThisAfterAnEvent(function(json) { console.log("key out: " + key); handler(json, key); }); }(key)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

在ES6 ，我們將使用let 。