如何减慢这个 for 循环并每 400 毫秒设置一次状态？

Question

我正在尝试在 React 中创建一个排序算法可视化工具。 此函数正在运行，但我想减慢 for 循环的速度，以便每 400 毫秒设置一次状态。

bubbleSort = (arr) => {
        console.log('bubblesort is running');
        var len = arr.length;
        console.log('array length: ', len);
        console.log(arr);

        for (var i = len-1; i>=0; i--){
                 console.log("i: ", i); 
                 for(var j = 1; j<=i; j++){
                     console.log("j: ", j);
                     if(arr[j-1]>arr[j]){
                        var temp = arr[j-1];
                        arr[j-1] = arr[j];
                        arr[j] = temp;
                        console.log("current array: ", arr);
                        this.setState({
                            array: arr
                        })
                     }
                 }
            } 
            console.log("final array: ", arr)
            return arr
     }

Answer 1

最简单的方法是使用async/await范式。

创建一个实现延迟的函数（通过返回一个超时后解决的承诺）：

const delay = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

然后将您的函数转换为async 函数：

bubbleSort = async (arr) => {

最后，将延迟调用添加到您的循环中：

await delay(400);

编辑：对于 cmets，使用 setTimeout 意味着函数不可能直接返回结果，因为在函数退出时结果将不可用。如果您只关心可视化排序，以上内容就足够了。如果您真的想要排序后的数组，则必须等待您的 bubbleSort 函数（或链接它返回的承诺）：

// needs to be inside `async` function
let sortedArray = await bubbleSort(array);

或

// the result needs to be used in callback
bubbleSort(array).then(sortedArray => ... );