while循环中的javascript setTimeout [重复]答案

【问题标题】：javascript setTimeout in a while loop [duplicate]while循环中的javascript setTimeout [重复]
【发布时间】：2021-07-30 10:50:42
【问题描述】：

您好，我想要 4 次超时来更新球的位置，因为球的速度不同。这是我的代码的一部分：

var i=1;
    while(i<=5)
    {
        console.log(i);
        intervals[i-1]=setInterval(function()
        {
            MoveBallHorizontalyWithSpeed(i);
            MoveBallVerticalyWithSpeed(i);
            showBalls();
            console.log(i);
        },speed/i);
        i++;
    }

问题是每个超时调用函数 6 但我希望第一个超时调用 MoveBallHorizontalyWithSpeed(1) 第二个 MoveBallHorizontalyWithSpeed(2) 等...

有没有比每次写超时更快的方法？

【问题讨论】：

for( let i=1; i<=5; i++)

标签： javascript html loops timeout updates

【解决方案1】：

问题是你在循环中使用了一个全局变量，所以所有的 setInterval 函数都使用同一个变量i，在这种情况下总是使用一个局部变量。你应该像这样改变你的代码：

for(let i = 1; i<=5; i++)
{
    console.log(i);
    setInterval(function()
    {
        console.log(i);
    },2000);
}

【讨论】：

【解决方案2】：

请试试这个：

var i=1;
    while(i<=5)
    {
        console.log(i);
const j = i;
        intervals[i-1]=setInterval(function()
        {
            MoveBallHorizontalyWithSpeed(j);
            MoveBallVerticalyWithSpeed(j);
            showBalls();
            console.log(j);
        },speed/j);
        i++;
    }

【讨论】：

【解决方案3】：

while 循环将完成其执行并将更新i 的值的原因。所以当setInterval 执行时，它会得到i 的最新值，即6。

为避免这种情况，您可以创建一个闭包和一个 IIFE，并将 i 的值作为参数传递给 IIFE。在 IIFE 中你可以调用 setInterval

var i = 1;
intervals = [];
while (i <= 5) {
  intervals[i - 1] = (function(x) {
    setInterval(function() {
      MoveBallHorizontalyWithSpeed(x);
      MoveBallVerticalyWithSpeed(x);

    }, 10 / x);

  })(i)
  i++;
}

function MoveBallVerticalyWithSpeed(speed) {
  console.log(speed)
}

function MoveBallHorizontalyWithSpeed(speed) {
  console.log(speed)
}

【讨论】：