我是 reactJS 的新手,正在尝试构建一个排序可视化器。我面临的问题是在实现 quickSort() 例程时。
我的 quickSort() 例程如下:
async quickSort(array, p, r) {
if(p<r){
this.Partition(array,p,r).then((q)=>{
console.log(p, ' ', r)
this.quickSort(array, p, q-1)
this.quickSort(array,q+1,r)
})
}
}
我有一个 .then 与 Partition 函数的原因是因为我在 Partition 例程中使用 async/await 来制作动画。然后分区例程返回分区“q”的值,然后可以进行递归。Partition 函数返回一个promise,它的值是分区值'q',没有它递归就不能继续,因此是'.then'部分。
现在,代码运行正常,但我想添加更多功能。我从 quickSortHelper() 例程内部调用这个 quickSort() 例程。在 quickSortHelper() 我首先禁用一个按钮,然后调用 quickSort() 并在完成 quickSort() 后我想再次启用该按钮。但问题是 quickSort(array, 0 , n-1) 仅在第一次调用后返回,因此该按钮立即被禁用和启用,而无需等待整个递归展开。
我尝试从 quickSort() 内部返回一个承诺,以确保当承诺得到解决时,我们才会继续启用按钮。但是承诺会在 1-2 次迭代后解决(这是有道理的,因为我认为函数会返回 p>r 的那一刻),因此按钮无需等待整个递归完成即可启用。
对于如何解决这个问题,有任何的建议吗?有没有办法暂停执行,直到 quickSort() 完成,然后继续启用按钮的工作?
async quickSortHelper(){
this.setState({generateButton: true})
console.log(this.state.generateButton)
var array = this.state.array
this.quickSort(array, 0, array.length-1 ).then(()=>{
this.setState({array})
this.setState({generateButton: false})
})
}
还有一件事,console.log(this.state.generateButton) 输出错误。所以它永远不会将状态设置为true?我不明白为什么会这样?