修改回调函数的参数数量-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 。