Javascript React js：单击按钮后激活progressbar倒计时

在我按下按钮后，我正在尝试激活进度条倒计时。因此，该按钮将被禁用90秒。progressbar到达90后，按钮将再次激活。 怎么做

以下是我迄今为止所取得的成就：

js:

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true
        };
        this.updateRequest = this.updateRequest.bind(this);
    }

    updateRequest() {
        const url =
            'html request for API';
        console.log(url);
        fetch(url, fetchConfig)
            .then((jsonObject) => {
                // fetching data
              })
            });
        this.setState({
            buttonEnabled: false
        });
        setTimeout(() => {
            this.setState({ buttonEnabled: true });
        });
    }

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact>
                    <div class="progress-circle p0">
                        <span>0%</span>
                        <div class="left-half-clipper">
                            <div class="first50-bar" />
                            <div class="value-bar" />
                        </div>
                    </div>
                    <button className="btn-next-request" onClick={() => this.updateRequest()}>
                        Time to Next API Request
                    </button>
                </GoogleMapReact>
            </div>
        );
    }
}

class BoatMap扩展组件{
建造师（道具）{
超级（道具）；
此.state={
按钮启用：正确
};
this.updateRequest=this.updateRequest.bind（this）；
}
updateRequest（）{
常量url=
“API的html请求”；
console.log（url）；
fetch（url，fetchConfig）
.然后（（jsonObject）=>{
//获取数据
})
});
这是我的国家({
按钮启用：false
});
设置超时（（）=>{
this.setState（{buttonEnabled:true}）；
});
}
render（）{
返回(
0%
this.updateRequest（）}>
到下一个API请求的时间
);
}
}

到目前为止我所做的：

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true
        };
        this.updateRequest = this.updateRequest.bind(this);
    }

    updateRequest() {
        const url =
            'html request for API';
        console.log(url);
        fetch(url, fetchConfig)
            .then((jsonObject) => {
                // fetching data
              })
            });
        this.setState({
            buttonEnabled: false
        });
        setTimeout(() => {
            this.setState({ buttonEnabled: true });
        });
    }

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact>
                    <div class="progress-circle p0">
                        <span>0%</span>
                        <div class="left-half-clipper">
                            <div class="first50-bar" />
                            <div class="value-bar" />
                        </div>
                    </div>
                    <button className="btn-next-request" onClick={() => this.updateRequest()}>
                        Time to Next API Request
                    </button>
                </GoogleMapReact>
            </div>
        );
    }
}

1） 我遇到了这个问题，但还没有弄清楚如何实现它

2） 这也是一个很好的来源。然而，我不确定它采取的方法。尽管如此，多亏了那篇帖子，我才能够设置

按钮

通话。我可以确认

按钮

正常工作并发送请求

3） 此外，这是另一个很好的源代码，尽管它使用的是

jquery

。我不太熟悉

jquery

，但这可能是一个很好的方法。不过，我不想把太多的东西混在一起

---

感谢您指出解决此问题的正确方向。

设置超时/设置间隔不是100%准确。实现这一点的最佳方法是在单击按钮时存储

新日期（）

，然后使用setInterval更新进度

解决方案如下所示：

class BoatMap扩展组件{
建造师（道具）{
超级（道具）；
此.state={
按钮启用：正确，
buttonClickedAt:null，
进展：0，
};
this.updateRequest=this.updateRequest.bind（this）；
this.countdownInterval=null；
}
componentDidMount（）{
this.countdownInterval=setInterval（（）=>{
如果（！this.state.buttonClickedAt）返回；
const date=新日期（）；
const diff=Math.floor（（date.getTime（）-this.state.buttonClickedAt.getTime（））/1000）；
如果（差值<90）{
这是我的国家({
进展：差异，
按钮启用：false，
});
}否则{
这是我的国家({
进展：0，
buttonClickedAt:null，
按钮启用：正确，
});
}
}, 500);
}
组件将卸载（）{
clearInterval（此为倒计时间隔）；
}
updateRequest（）{
常量url=
“API的html请求”；
console.log（url）；
fetch（url，fetchConfig）
.然后（（jsonObject）=>{
//获取数据
})
});
这是我的国家({
按钮启用：false，
buttonClickedAt:新日期（），
进展：0，
});
}
render（）{
返回(
{this.state.progress}%
this.updateRequest（）}>
到下一个API请求的时间
);
}
}

Perfect:）真管用！非常感谢你的帮助！