javascript setTimeout 在 while 循环中

编程问答 2022-07-11

问题描述

你好，我想有 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 个函数，但我希望第一个超时调用 MoveBallHorizo​​ntalyWithSpeed(1) 第二个 MoveBallHorizo​​ntalyWithSpeed(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++;
    }
,

问题是您在循环内使用了全局变量，因此所有 setInterval 函数都使用相同的变量 i，在这种情况下始终使用局部变量。您应该像这样更改代码：

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

,

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

htmljavascriptloopstimeouttimeoutupdates