为什么 setTimeout() 在我的排序函数中不起作用？答案

【问题标题】：Why doesn't setTimeout() work in my sorting function?为什么 setTimeout() 在我的排序函数中不起作用？
【发布时间】：2020-09-07 12:44:23
【问题描述】：

更新我无法弄清楚这是什么问题，但我找到了解决我的整体问题的方法。我只是将我的 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 })
    }

【问题讨论】：

setTimeout 的延迟参数是毫秒数，因此您可能希望将该因子从 1 增加到 500 或 1000。此外，setTimeout 不会暂停执行时，它将异步、并行地运行回调中的代码。
嘿 Bryan，您可能想考虑使用函数调用自身，直到它被排序并且您可以使用 setTimeout 调用函数？我不确定它将如何与 React 和 states 一起使用，但我猜值得一试 =)
这是因为延迟函数没有运行，并且它们都没有在循环中清除 isSorted 标志 - 保持真实，而循环中断......你可以使用状态变量来做这个动画，不局部变量...每次迭代都遵循延迟检查if( ! this.state.isSorted ) this.repeatLoop()

标签： javascript reactjs for-loop while-loop settimeout

【解决方案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)

【讨论】：