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

因为您正在立即执行该功能。

另一种方法是使用函数声明

包装它

＆＃13;

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");
}

＆＃13;

Answer 2

这是因为你实际上在调用函数，这就是为什么它的行为就像那样。

myFunction(x)

将触发该函数，为其提供返回值，setTimeout需要一个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）的结果，这是未定义的。因此，timeOut将无需执行任何操作。

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

还有另一种解决方法。您所需要的只是将函数对象传递给超时。如果你想避免创建闭包，你可以这样做：

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

这将创建一个新的函数对象，不带任何自由参数，它将 this 作为上下文接收，并调用myFunction（x）。这里的上下文可能是不必要的，但是在使用setTimeout时你应该注意这一点：它总是将窗口作为默认上下文，所以如果你从这个有一个范围的范围内调用它有用的意思，你想保存它，你应该将它的功能绑定到它。

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

Answer 5

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

虽然有一点点细微差别。

如果var x = 1在myFunction执行延迟setTimeout时更改了其值，您将在控制台上看到“选项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);
	}
}

将参数传递给回调函数

5 个答案: