javascript - 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)

                })  
            }   
    }

Partition 関数で .then を使用する理由は、アニメーションの Partition ルーチンで async/await を使用しているためです。次に、Partition ルーチンがパーティション 'q' の値を返し、再帰が発生する可能性があります。Partition 関数は、その値がパーティション値 'q' であるプロミスを返します。この値がないと再帰は続行できず、したがって '.then' 部分になります。

現在、コードは正しく実行されていますが、もう少し機能を追加したいと考えています。この quickSort() ルーチンは、quickSortHelper() ルーチンの内部から呼び出しています。quickSortHelper() では、最初にボタンを無効にしてから、quickSort() を呼び出し、quickSort() の完了後にボタンを再度有効にします。しかし、問題は、最初の呼び出しの後に quickSort(array, 0 , n-1) が返されるため、ボタンが即座に無効になり、再帰全体が展開されるのを待たずに有効になることです。

約束が解決されたときにのみボタンを有効にするように、quickSort() 内から約束を返そうとしました。しかし、promise は 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})
        })
    }

また、もう 1 つ、console.log(this.state.generateButton) が false を出力します。それで、状態を真に設定することは決してありませんか？なぜこれが起こっているのか理解できませんか？