setTimeOut 在 for loop Javascript React 内部不起作用

Question

所以基本上我正在构建一个带有反应的视觉排序算法应用程序，我正在实现冒泡排序，总体思路是生成一个从数字 1 到 50 的数组，将其打乱并使用冒泡排序方法对其进行排序。现在的问题是，我希望每次交换两个值时延迟 500 毫秒，以便用户了解算法的工作原理，但 setTimeOut 似乎在 for 循环中不起作用。

function doBubbleSort() {
const animationsArray = document.getElementsByClassName('col-itself');
let arr = this.state.numbers;
console.log(arr);
let len = arr.length;

for (let i = 0; i < len ; i++) {
    for(let j = 0 ; j < len - i - 1; j++){
        if (arr[j].value > arr[j + 1].value) {
            let temp = arr[j].value;
            arr[j].value = arr[j+1].value;
            arr[j+1].value = temp;

            const barOneStyle = animationsArray[j].style;
            const barTwoStyle = animationsArray[j+1].style;
            const barOneHeight = arr[j].value * 3 + 'px';
            const barTwoHeight = arr[j+1].value * 3 + 'px';
            const color = '#FF5722';

            setTimeout(() => {
                barOneStyle.backgroundColor = color;
                barOneStyle.height = barOneHeight;
                barTwoStyle.backgroundColor = color;
                barTwoStyle.height = barTwoHeight;
            }, 500);
        }
    }
}
return arr;}

现在的行为是应用程序等待 500 毫秒，然后立即执行所有代码，因此它在 500 毫秒后从未排序变为完全排序。 我希望你能帮助我。

Answer 1

您编写的代码正在排队一堆函数，这些函数将在您的外部 for 循环执行后 500 毫秒内运行。

您可以采取的一种方法是跟踪超时并在循环的每次迭代中将其增加 500。

let timeout = 500;
for ...
  for ..
    // call setTiemout with your code 
    setTimeout(/* your function */, timeout);
    // increment timeout
    timeout += 500;

所以循环的第一次迭代将在 500 毫秒内调用您的超时回调，第二次在 1000 毫秒内调用，第三次在 1500 毫秒内调用，依此类推。

您使用这种方法的代码：

function doBubbleSort() {
const animationsArray = document.getElementsByClassName('col-itself');
let arr = this.state.numbers;
console.log(arr);
let len = arr.length;
let timeout = 500;

for (let i = 0; i < len ; i++) {
    for(let j = 0 ; j < len - i - 1; j++){
        if (arr[j].value > arr[j + 1].value) {
            let temp = arr[j].value;
            arr[j].value = arr[j+1].value;
            arr[j+1].value = temp;

            const barOneStyle = animationsArray[j].style;
            const barTwoStyle = animationsArray[j+1].style;
            const barOneHeight = arr[j].value * 3 + 'px';
            const barTwoHeight = arr[j+1].value * 3 + 'px';
            const color = '#FF5722';

            setTimeout(() => {
                barOneStyle.backgroundColor = color;
                barOneStyle.height = barOneHeight;
                barTwoStyle.backgroundColor = color;
                barTwoStyle.height = barTwoHeight;
            }, timeout);
            timeout += 500;
        }
    }
}
return arr;}