Javascript 如何降低for循环的速度并每400毫秒设置一次状态？

我试图在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
     }

bubbleSort=（arr）=>{
log（“bubblesort正在运行”）；
var len=阵列长度；
log（'数组长度：'，len）；
控制台日志（arr）；
对于（变量i=len-1；i>=0；i--）{
console.log（“i:，i”）；
对于（var j=1；jarr[j]）{
var-temp=arr[j-1]；
arr[j-1]=arr[j]；
arr[j]=温度；
log（“当前数组：”，arr）；
这是我的国家({
阵列：arr
})
}
}
} 
log（“最终数组：”，arr）
返回arr
}

最简单的方法是使用

async

/

wait

范式

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

然后将函数转换为

async

函数：

bubbleSort = async (arr) => {

最后，将延迟调用粘贴到循环中：

await delay(400);

编辑：根据注释，使用

setTimeout

意味着函数无法直接返回结果，因为在函数退出时结果将不可用。如果您只关心排序的可视化，以上内容就足够了。如果您确实需要排序数组，则必须等待

bubbleSort

函数（或链接它返回的承诺）：

或

---

最简单的方法是使用

async

/

await

范式

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

然后将函数转换为

async

函数：

bubbleSort = async (arr) => {

最后，将延迟调用粘贴到循环中：

await delay(400);

编辑：根据注释，使用

setTimeout

意味着函数无法直接返回结果，因为在函数退出时结果将不可用。如果您只关心排序的可视化，以上内容就足够了。如果您确实需要排序数组，则必须等待

bubbleSort

函数（或链接它返回的承诺）：

或

---

你不能，除非完全重新编写代码。JavaScript（实际上）是单线程的，因此您必须将代码分成更小的单元，以便控制事件循环和其他可能希望显示该状态的代码。这是否回答了您的问题@现在你可以了

async

/

await

允许您无需重写即可完成此操作。现在写一个答案…@Amadan我想这差不多是完全重写了，特别是因为OPs代码中没有函数调用，你可以

wait

。你可以在标准

for

循环中使用

wait

，这将“错开”循环的迭代。你不能，没有完全重新编写代码。JavaScript（实际上）是单线程的，因此您必须将代码分成更小的单元，以便控制事件循环和其他可能希望显示该状态的代码。这是否回答了您的问题@现在你可以了

async

/

await

允许您无需重写即可完成此操作。现在就写一个答案…@Amadan我想这很接近于完成一个完整的重写，特别是因为OPs代码中没有可以

wait

的函数调用。你可以在标准

for

循环中使用

wait

，这将“错开”循环的迭代。很公平，尽管此函数的调用方现在需要知道如何

等待

以获得结果，这意味着该函数必须是

异步的

，或者直接使用承诺，以便它知道何时完成排序completed@Alnitak对的不可能减慢同步功能的速度。无法插入延迟并使函数仍然返回有意义的结果。无论您使用的是

setTimeout

、

Promise

还是

async

/

wait

范式，这都是正确的。我想我应该注意到，在回答中…

async

/

await

可能是病毒性的-一旦你把它们添加到调用堆栈的某个地方，你往往需要一路向上传播，尽管这个函数的调用者现在需要知道如何

等待

才能得到结果，这意味着要么该函数必须是

异步的

，要么直接使用Promise，以便知道排序何时完成completed@Alnitak对的不可能减慢同步功能的速度。无法插入延迟并使函数仍然返回有意义的结果。无论您使用的是

setTimeout

、

Promise

还是

async

/

wait

范式，这都是正确的。我想我应该注意到，在回答中…

async

/

await

可能是病毒性的-一旦你把它们添加到调用堆栈的某个地方，你往往不得不一路传播

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