There is a component in React JS:

import React, {Component} from 'react'; export default class RebootSitePopup extends Component { constructor(props) { super(props); this.state = {timer: 0}; } componentDidMount() { this.startTimer(); } componentWillUnmount() { this.deleteTimer(); } startTimer() { if (this.interval) { clearInterval(this.interval); } this.setState({timer: this.props.time_to_reboot}); this.interval = setInterval( () => { this.setState({timer: this.state.timer - 1}); if (this.state.timer === 0) { clearInterval(this.interval); console.log('clearInterval'); } }, 1000 ) } deleteTimer() { if (this.interval) { clearInterval(this.interval); } this.setState({timer: 0}); } render() { return ( <div className="reality-check__overlay"> <div className="reality-check__modal"> <div className="reality-check__modal-inner"> <div className="reality-check__title">{gettext("common__page_will_be_reloaded")}</div> <div className="reality-check__sub-title"> {gettext("common__page_will_be_reloaded_after")}: {this.state.timer} /> </div> </div> </div> </div> ); } }

The point is that the component should simply render a small form with a timer. this.props.time_to_reboot stores the time until the timer is turned off (for example, the number 10). How my timer works:

  • After the first iteration, the delay is less than a second.
  • After the second iteration, the delay is 3 seconds.
  • After the third iteration, a delay of 2 seconds.
  • Further, the delay between iterations is 1 second.

How can I "align" the timer so that there is a delay of 1 second between each iteration?

  • 2
    In general, setState can run asynchronously, so making a timer: this.state.timer - 1 and this.state.timer === 0 not correct. About the correct way to say the documentation . Because of the same asynchrony, in principle, it may be that it is drawn out late, although a delay of 3 seconds is perhaps too much - Regent

0