为什么setTimeout（）在我的排序函数中不起作用？

Question

UPDATE我无法弄清楚问题出在哪里，但是我找到了解决整体问题的解决方案。我只是简单地将我的bubbleSort（）算法更改为仅使用for循环，这似乎起作用了。谢谢您的帮助！

我目前正在学习javaScript和React。作为一个实践项目，我试图创建一个排序算法可视化程序。对于（我认为这将是简单的）热身，我首先使用在网上找到的伪代码实施了冒泡排序。我有这个数组，所以数组可以在屏幕上排序和更改，但是它太快了，因此它没有显示该过程的实际动画。为此，我需要延迟算法中循环的每次迭代。但是，我的实现方式很奇怪。显示屏将动画显示正在排序的第一个迭代，然后突然停止。当我将setTimeout（）添加到函数中时，该算法似乎提前退出，而不是完成整个过程。要完成整个排序过程，您需要重复按下按钮，直到对每个项目进行排序。我尝试的所有方法似乎都没有效果，如果有人可以解释原因并提供帮助，我将不胜感激。

bubbleSort() {
        var arr = this.state.array
        var isSorted = false
        var lastUnsorted = arr.length - 1
        while (!isSorted) {
            isSorted = true;
            for (let i = 0; i < lastUnsorted; ++i) {
                setTimeout(() => {
                    if (arr[i] > arr[i + 1]) {
                        swap(arr, i, i + 1)
                        isSorted = false
                    }
                    this.setState({ array: arr })
                }, i * 1);
            }
            lastUnsorted--
        }
        this.setState({ array: arr })
    }

Answer 1

[setTimeout是异步的，但是您的代码不会等待它解决，因此它会调用setTimeout达lastUnsorted次，因此所有超时都在同一时间发生。

您需要通过回调来控制它。

以下设置将导致console.log（'tick'）每1秒发生一次，持续5秒。

const functionToRepeat = () => {
  console.log('tick')
}

const loopWithCallback = (callback, i, limit) => {
  if(i > limit) return
  
  setTimeout(()=>{
    callback(loopWithCallback(callback, i+1, limit))
  }, 1000)
  
}

loopWithCallback(functionToRepeat, 1, 5)