How can I cancel the setTimeout time in react

Question

I have created an application in which when a button is pressed the clock time starts. If nothing is done after 23 seconds (23000) is set to 0 and the state is changed (this.state.user) .This is correct.

If you click on the element again, I need the 23 seconds (23000) to be zeroed and the Timeout cleaned. Because if there is still some time left in the timeout, the item closes automatically.

I tried "clearTimeout (this.change); clearInterval (this.change); "but it doesn't work, I don't know how to cancel this time.

class Header extends Component {
    constructor(props) {
        super(props);

        this.change = null;

        this.state = {
            usuario: true,
            timeElapsed: 0,
            adminOrWrap: true,
        };

        ["descansoAdminWrap", "otrosDescansos",].forEach((method) => {
            this[method] = this[method].bind(this);
        });
    }

   componentDidUpdate(prevProps, prevState) {
        if (prevProps.notInCall === false && this.props.notInCall && this.state.usuario === true) {
            this.descansoAdminWrap(prevProps, prevState);
       }
   }

    descansoAdminWrap(prevProps){
        var usuarioAdminOrWrapFalse=  this.state.usuario && this.props.adminOrWrap === false;
        var notInCallFalseUsuario= this.props.notInCall === false && this.state.usuario
        //mostrar y ocultar el descanso de 'tiempo administrativo' y 'wrap time'
        if(this.state.usuario && this.props.notInCall){
            this.setState({
                usuario: false,
                timeElapsed: 0,
            });
            clearTimeout(this.change);
            clearInterval(this.change);
            if(prevProps.notInCall === false){
                this.handleAdminOrWrap(false)
                this.setState({
                    usuario: false,
                    timeElapsed: 0,
                });
                this.change = setTimeout(() => {
                    this.setState({
                        usuario: true,
                        notInCall: true,
                    });
                    this.handleAdminOrWrap(true)
                }, 23000)
            }
        }
    }

clearTimeout is the way to do it. check your 'if conditions' if they are executing properly — Monika Mangal
– Monika Mangal, Commented Aug 1, 2019 at 8:38

Morphyish · Accepted Answer · 2019-08-01 08:43:25Z

1

clearTimeout is used for setTimeout, and clearInterval for setInterval.

So using a clearInterval here isn't going to help.

I would check if you are actually call the clearTimeout with a console.log inside your if condition when you expect to do so. Especially when you are modifying the state.usuario value to false the first time around, which would prevent you to clear the condition again.

answered Aug 1, 2019 at 8:43

Morphyish

4,07210 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I cancel the setTimeout time in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related