如何在继续使用 Javascript 之前等待整个递归完成？

Question

我是 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) 输出 false。所以它永远不会将状态设置为true？我不明白为什么会这样？

Answer 1

您的quickSort 函数当前返回一个立即解析为未定义值的承诺。您需要返回一个承诺，并await 解决它。所以要么继续then 链（然后你就不需要async），或者使用async/await（比较下）：

function quickSort(array, p, r) {
    if (p < r) {
        return this.Partition(array,p,r).then((q) => {
    //  ^^^^^^
            console.log(p, ' ', r);
            return this.quickSort(array, p, q-1);
    //      ^^^^^^
        }).then(() => {
            return this.quickSort(array,q+1,r);
    //      ^^^^^^
        });
    }   
}

当然，混合async 和then 有点奇怪，所以你也应该用await 语法替换then：

async quickSort(array, p, r) {
    if (p < r) {
        let q = await this.Partition(array,p,r);
        console.log(p, ' ', r);
        await this.quickSort(array, p, q-1);
        await this.quickSort(array,q+1,r);
    }   
}

注意：使用分号。当您可以自己控制时，依赖自动分号插入就是放弃控制。

Answer 2

这应该可以完成工作：

async quickSort(array, p, r) {
    if(p<r){
        const q = await this.Partition(array,p,r);
        console.log(p, ' ', r);
        await this.quickSort(array, p, q-1);
        await this.quickSort(array,q+1,r);
    }
}