访问回调参数到内回调

Question

我正在尝试理解此代码。

let a = [1, 2, 3, 4, 5];
a.forEach(i => {
  setTimeout(i => {
    console.log(i);
  }, 1000);
});

为什么它给出这样的输出：

5 times: undefined

我知道javascript执行代码异步并计划setTimeout函数，当迭代停止i的最后一个值时，不确定，但是为什么不确定。

在javascript中，我们无法访问外回调参数的范围吗？

Answer 1

只需删除setTimeout中的i

let a = [1,2,3,4,5];
a.forEach((i) => {
    setTimeout(() => {
        console.log(i);
    }, 1000);
});

Answer 2

这只是标准阴影。

考虑以下代码：

let x = "outer";
console.log(x);
{
    let x = "inner";
    console.log(x);
}
console.log(x);

内部块无法访问外部x，因为它已声明了同名的本地变量。

同样，在您的代码中，有两个变量称为 i：

    a.forEach(i => {
        setTimeout(i => {

唯一的区别是它们是函数参数，而不是用let声明。除此之外，它们以相同的方式工作：内部i阴影外部i，阻止访问。要解决此问题，只需删除内部i即可。setTimeout无论如何都不会将任何有用的参数传递给回调。

Answer 3

您的内回调具有一个名为 i的参数，该参数阴影，它会阴影i。

setTimeout()不会将任何参数传递给其回调，因此内部i是undefined。

要使用外回调的参数或变量，只需使用它。

Answer 4

另一个选项是将第三个参数用于setTimeout。delay之后添加的所有参数将作为参数传递给setTimeout

内的函数

这是语法：

setTimeout(func[, delay, param1, param2, ...])

在这里，param1, param2等作为参数传递给func

let a = [1, 2, 3, 4, 5];
a.forEach(i => {
  setTimeout(value => {
    console.log(value);
  }, 1000, i);
});

如果您单独定义该函数并且无法闭合forEach回调

的i，这将很有用

function callback(value) {
  console.log(value)
}
let a = [1, 2, 3, 4, 5];
a.forEach(i => {
  setTimeout(callback, 1000, i);
});