将参数传递给回调函数

Question

我有这个简单的例子。 我需要将参数传递给回调函数。 在这段代码中，当我不传递任何参数时，计时器可以正常工作，并且在经过指定的时间间隔后它将执行回调函数。 但是，如果我传递了x ，该函数将在不等待5秒（或指定的任何时间）的情况下执行。您能解释一下如何将参数传递给回调函数吗？

var x=1;
console.log("starting the script");
setTimeout(myFunction(x),5000);

function myFunction(x)
{
    console.log("This should appear after 5 seconds");
    if (x==1)
        console.log("option 1");
    else
        console.log("option 2");
}

Answer 1

因为您将立即执行该功能。

另一种方法是用函数声明包装它

 var x = 1; console.log("starting the script"); setTimeout(function() { myFunction(x); }, 1000); function myFunction(x) { console.log("This should appear after 1 second"); if (x == 1) console.log("option 1"); else console.log("option 2"); } 

Answer 2

这是因为您实际上是在调用该函数，这就是为什么它会那样工作。

myFunction(x)

这将触发该函数，为您提供它的返回值，并且setTimeout需要一个FUNCTION而不是RESULT OF A FUNCTION的结果，因此您需要将函数包装到另一个函数中，因此只需执行以下操作：使用ES6

setTimeout(()=> myFunction(x),5000);

或使用常规JS：

setTimeout(function(){
    myFunction(x)
 }, 5000);

Answer 3

尝试使用.bind()应该可以。

setTimeout(myFunction.bind(x),5000);

使用您的方法，您将立即执行该函数，这就是为什么它不等待指定的时间量的原因。

.bind()会将x添加到该函数的上下文中，如果您正在考虑代码中的模块化，则这可能不是最佳解决方案，否则这对于您提供的代码应该是合理的。

Answer 4

只是要补充一下，您传递给超时的实际上是myFunction（x）的结果，该函数未定义。 因此，超时将没有任何执行。

如果myFunction（x）确实返回了一个函数对象，那么您将立即看到myFunction（x）的执行结果，并且在5秒钟后将看到其他函数的执行结果。

还有另一种解决方法。 您需要做的就是将一个函数对象传递给超时。 如果要避免创建闭包，可以执行以下操作：

setTimeout(myFunction.bind(this,x), 5000);

这将创建一个没有任何自由参数的新函数对象，该对象将作为上下文接收该函数对象，并调用myFunction（x）。 上下文可能是不必要在这里，但东西你真的应该知道使用的setTimeout时：它始终站在窗口，默认情况下，因此，如果您是从一个范围，其中该有一个有用的含义里面调用它，你想节约它，您应该将其功能绑定到它。

因为您只是绑定了函数，所以实际上并没有调用它：setTimeout这样会收到一个函数对象，该对象将在5秒钟后触发。 它不会向其传递新的参数，但是没关系，因为您已经绑定了参数。

Answer 5

上面的@Ele答案是完全正确的。

虽然有细微差别。

如果在使用setTimeout延迟myFunction执行时var x = 1更改了其值，您将在控制台上看到“选项2”，而不是“选项1”。 这可能是期望的行为，但也可能不是。 这完全取决于您的设计目标。

如果需要myFunction执行取决于设置超时时设置的x值，而不是在myFunction实际执行时设置的值，则必须围绕myFunction创建一个闭包，并将其传递给setTimeout 。

尝试基于@Ele示例运行以下代码，以查看两种方法之间的区别。

 var x = 1; console.log("starting the script"); setTimeout(function() { myFunction(x); }, 1000); setTimeout( closureBuiler(x) , 2000); x = 2; function myFunction(x) { console.log("Delayed output"); if (x == 1) console.log("option 1"); else console.log("option 2"); } function closureBuiler(x) { return function(){ myFunction(x); } }