Question

任何人都可以帮助我理解返回函数执行的原因吗？

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function(i_local) {
    //The function below is just returned and not called using '()', so why is it executed? Why does the console.log works?
    return function() {
      console.log('The index of this number is: ' + i_local);
    }
  }(i), 3000);
}

Answer 1

setTimeout函数获取一个函数作为参数，并在X毫秒后执行它。

在JavaScript中，函数就像任何其他变量一样。您可以将它们作为参数传递给其他函数。其他功能可以在以后执行。

像这样：

function setNow(func){
    func()
}

setNow(function(){
    console.log('this will be executed.')
})

此外，即使您不使用()直接调用该函数，也会执行该函数。

在您的示例中，您的内部函数返回，现在这是setTimeout收到的函数。它将在X ms之后执行。

我建议你以不同的方式做到这一点：

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout( (i_local=> {
      console.log('The index of this number is: ' + i_local);
  }).bind(this,i), 3000);
}

了解详情：

JavaScript bind

Answer 2

因为它是IIFE

有一些名为IIFE或立即调用函数表达式。它们按以下方式工作 ( immediately invoked function expression )

(function(received argument){

     //some code here.......

})(passed argument)  //<-- here the function is invoked immediately after creation

上面的函数在创建时立即被调用。这种类型的声明用于保持变量私有并保持全局命名空间清洁。

与

等价

function f(){} // we declare the function first

f() // and we invoked it later

代码中的模式用于创建modules。

在您的情况下：

setTimeout接受一个函数作为它的第一个参数。你使用了一个IIFE，它立即调用并返回一个函数。这个返回的函数在setTimeout中用作参数。

如何立即调用函数表达式（iife）作为setTimeout的参数

2 个答案: