想要模式以便在JavaScript中将函数参数传递给setTimeout调用的最佳方法

Question

我正在努力将传递给函数的所有参数传递给setTimeout的函数的最佳方法。 也就是说，在我下面的例子中，我传递了一个参数，但在我看来，因为它变得更复杂，它变得丑陋（多个参数）。 因为我做了很多，所以我希望有一个干净的模式来做这件事。

onSessionTimeComboChange: function (combo, newValue, oldValue, eOpts) {
    var me = this;
    me.newValue = newValue;
    setTimeout(function () {
        var x = me.newValue;
        debugger;
    }, 100);
}

Answer 1

您无法访问回调函数中的主函数变量的原因是setTimeout()执行的代码在一个单独的执行上下文中运行，该函数从中调用它。 简单来说， this在回调中是不一样的。

如果您不想使用提供函数的Javascript库将回调绑定到上下文（请参阅jQuery.proxy和underscore.bind ），则必须编写自己的非本机setTimeout函数来解决此问题。

以下是web api文档中提出的解决方案（请参阅The "this" problem ）：

window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
  return __nativeST__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback, nDelay);
};

如果你不想那么做，你的代码的改进就是将参数作为setTimeout的参数传递给回调：

var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);

查看JavaScript web api以获取更多详细信息。

所以在你的例子中，你可以写下这样的东西：

setTimeout(function (x) {
    debugger;
}, 100, newValue);

Answer 2

Javascript支持闭包，因此您可以毫不费力地将所需的任何参数传递给任何回调：

function bar(x, y, z) {
    console.log([x, y, z]);
}

for (var i=0; i<5; i++) {
    (function(x, y, z){
        setTimeout(function(){bar(x, y, z);}, i*1000+1000);
     })(i, i*2, i*3);
}

唯一棘手的部分是你不能只说

setTimeout(function(){bar(i, i*2, i*3)}, i*1000+1000);

因为闭包捕获变量 （而不是当前值），所以在这种情况下，所有已注册的函数实际上将使用相同的i值。