Javascript 如何在前一行代码完成后使其工作？

我只想在我调用的函数完成后更改组件的状态。 该函数包含一段时间后结束的间隔。 我尝试过使用busy wait，使用wait，但它似乎对我不起作用

这是我初始化状态的方式

constructor(props){
        super(props);
        this.state = {
            array: [],
            status: false
        }
    }

这是我试图使其等待其中一行完成的函数

bubble_sort_visualize(){
        if(this.state.status === false){
            this.setState({status: true});
            const arr = this.state.array.slice();
            const animations = this.bubble_sort_and_push([], arr);
            this.animate(animations);
            // need to make it work after animate finishes
            this.setState({status: false});
        }
    }

这是我想在另一行开始之前完成的函数

animate(animations){    
        const colors = ['blue', 'red', 'bisque', '#80ff80'];
        const bars = document.getElementsByClassName("bar");
        let i = 0;
        const intervalHander = function(){
            const animation = animations[i];
            const bar1 = bars[animation[0]];
            const bar2 = bars[animation[1]];
            const color = colors[animation[2]];
            changeColor(bar1, bar2, color);
            i++;
            if(i === animations.length){
                window.clearInterval(interval);
            }
        }
        const interval = window.setInterval(intervalHander,0.5);
    }

---

所以基本上，我试图在animate方法执行clearInterval操作后，更改气泡排序可视化方法中的状态。

因为您希望在所有动画完成后触发setState，使用在setInterval中触发执行的ih animate函数，您需要转换animate以返回如下承诺

animate(animations){  
   return new Promise(res => {
        const colors = ['blue', 'red', 'bisque', '#80ff80'];
        const bars = document.getElementsByClassName("bar");
        let i = 0;
        const intervalHander = function(){
            const animation = animations[i];
            const bar1 = bars[animation[0]];
            const bar2 = bars[animation[1]];
            const color = colors[animation[2]];
            changeColor(bar1, bar2, color);
            i++;
            if(i === animations.length){
                window.clearInterval(interval);
                res();
            }
        }
        const interval = window.setInterval(intervalHander,0.5);
   })  
}

像这样使用它

async bubble_sort_visualize(){
    if(this.state.status === false){
        this.setState({status: true});
        const arr = this.state.array.slice();
        const animations = this.bubble_sort_and_push([], arr);
        await this.animate(animations);
        this.setState({status: false});
    }
}

---

由于您希望在所有动画完成后触发setState，而ih animate函数会在setInterval中触发执行，因此需要转换animate以返回如下承诺

animate(animations){  
   return new Promise(res => {
        const colors = ['blue', 'red', 'bisque', '#80ff80'];
        const bars = document.getElementsByClassName("bar");
        let i = 0;
        const intervalHander = function(){
            const animation = animations[i];
            const bar1 = bars[animation[0]];
            const bar2 = bars[animation[1]];
            const color = colors[animation[2]];
            changeColor(bar1, bar2, color);
            i++;
            if(i === animations.length){
                window.clearInterval(interval);
                res();
            }
        }
        const interval = window.setInterval(intervalHander,0.5);
   })  
}

像这样使用它

async bubble_sort_visualize(){
    if(this.state.status === false){
        this.setState({status: true});
        const arr = this.state.array.slice();
        const animations = this.bubble_sort_and_push([], arr);
        await this.animate(animations);
        this.setState({status: false});
    }
}

---

这就是我要做的。动画完成后，我将调用该函数

大概是这样的：

animate(animations){    
        const colors = ['blue', 'red', 'bisque', '#80ff80'];
        const bars = document.getElementsByClassName("bar");
        let i = 0;
        const intervalHander = function(){
            const animation = animations[i];
            const bar1 = bars[animation[0]];
            const bar2 = bars[animation[1]];
            const color = colors[animation[2]];
            changeColor(bar1, bar2, color);
            i++;
            if(i === animations.length){
                window.clearInterval(interval);
                this.bubble_sort_visualize()
            }
        }
        const interval = window.setInterval(intervalHander,0.5);
    }

---

我假设动画在

I==animations.length

时完成，这就是我将要做的。动画完成后，我将调用该函数

大概是这样的：

animate(animations){    
        const colors = ['blue', 'red', 'bisque', '#80ff80'];
        const bars = document.getElementsByClassName("bar");
        let i = 0;
        const intervalHander = function(){
            const animation = animations[i];
            const bar1 = bars[animation[0]];
            const bar2 = bars[animation[1]];
            const color = colors[animation[2]];
            changeColor(bar1, bar2, color);
            i++;
            if(i === animations.length){
                window.clearInterval(interval);
                this.bubble_sort_visualize()
            }
        }
        const interval = window.setInterval(intervalHander,0.5);
    }

---

我假设动画在

I===animations.length

高兴得到帮助高兴得到帮助我不确定它是否会工作，因为我认为intervalHander函数不识别“this”。我已经尝试过了，正如我所想，它抛出了一个关于“this”的错误嘿，如果这是您唯一关心的问题，您可以通过以下方式调用它来将正确的“this”上下文绑定到您的函数：

const interval=window.setintervalhander.bind（this），0.5）我不确定它是否有效，因为我认为intervalHander函数不识别“this”。我已经尝试过了，正如我所想，它抛出了一个关于“this”的错误嘿，如果这是您唯一关心的问题，您可以通过以下方式调用它来将正确的“this”上下文绑定到您的函数：
const interval=window.setintervalhander.bind（this），0.5）