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
}
解决方案
最简单的方法是使用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 => ... );
推荐阅读
- python - Python ncurses addstr 预期字节或 str,得到 int
- grails - 在列表中包含的值中定义固定位置
- javascript - IF 在地图箭头函数内
- javascript - webpack 文件加载器输出损坏的图像
- r - R中的子集列表
- html - 显示父伪的子属性
- java - AWS RDS 连接数据库错误:com.mysql.jdbc.exceptions.jdbc4.CommunicationsException:通信链路故障
- javascript - 谷歌地图距离矩阵错误“originAddresses”:[“nan,nan”]
- r - 如何根据列表中每一行的内容提取字符?
- django-rest-framework - 从 Angular 5 前端发布到 Django Rest Framework 后端