我怎样才能减慢这个 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);

编辑：根据评论，使用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 => ... );