将动态参数应用于 JavaScript 函数，但延迟调用

Applying dynamic arguments to JavaScript function but deferring invocation

本文关键字：延迟 调用 函数 JavaScript 动态 参数 应用于      更新时间：2023-09-26

考虑这个JavaScript代码：

var someArg = "Hello";
elem1.onclick = function() { foo(someArg); };
someArg = "Bye";
elem2.onclick = function() { foo(someArg); };

当我单击elem1时，我想用参数"Hello"调用foo，但是，上面的代码工作方式，foo每次都用"再见"调用。

基本上，我想将someArg应用于foo但直到以后才真正调用foo。

执行此操作的

常用方法是使用构建器函数：

var someArg = "Hello";
elem1.onclick = buildHandler(someArg);
someArg = "Bye";
elem2.onclick = buildHandler(someArg);
function buildHandler(arg) {
    return function() { foo(arg); };;
}

。或带Function#bind：

var someArg = "Hello";
elem1.onclick = foo.bind(null, someArg);
someArg = "Bye";
elem2.onclick = foo.bind(null, someArg);

无论哪种方式，您正在做的是创建一个新函数，该函数在调用时，使用您传递给它的值调用foo。原始代码不起作用的原因是函数在变量someArg上关闭，而不是创建时的值。因此，由于它们在调用时使用该值，因此您不会获得所需的值。上述两种解决方案（以不同的方式）都创建了函数，这些函数关闭了在创建函数时取值的东西。

这是因为，这就是Javascript的工作方式。您必须使用不同的变量调用foo()才能实现此目的。我只看到一种解决方法。

var someArg1 = "Hello";
var someArg2 = "Bye";   
elem1.onclick = function() { foo(someArg1); };   
elem2.onclick = function() { foo(someArg2); };

这是因为，foo只有在您调用foo()时才会获取参数，并且该参数将是该调用点someArg变量的值。由于 Javascript 在页面加载时执行函数调用之外的所有内容，因此它也将在页面加载时执行someArg = 'Bye'。

按照你设置它的方式，javascript 正在更改加载时 someArg 的定义，几乎在它第一次定义它之后立即。 您需要使用另一个变量，如下所示：

var someArg = "Hello";
elem1.onclick = function() { foo(someArg); };
var someArg2 = "Bye";
elem2.onclick = function() { foo(someArg2); };

或者将变量传递到函数中，并在其他地方定义该变量：

elem1.onclick = function(someArg) { foo(someArg); };
elem2.onclick = function(someArg) { foo(someArg); };
//Some stuff happens....
thisVariable = 'stuff happened';
elem2.onclick(thisVariable);

这将导致 foo 在参数中被调用为"发生了一些事情"。

希望这有所帮助。 如果没有，请提供有关您的用例的更多详细信息，以便我们可以更多地关注我们的答案。

相关文章：