javascript - clearInterval not working in React Timer App - Stack Overflow

admin管理员组

文章数量:1332345

I've been working on improving my React skills by creating a pomodoro timer app. For some reason I can't seem to get clearInterval working:

startTimer() {
    const { started } = this.state;
    var timer;
    if (!started) {
      timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(timer);
      this.setState({ started: false });
    }
  }

No console errors. Can confirm that it's definitely running that part of the conditional statement (when I log this.state.started it shows false). The timer just keeps ticking and doesn't actually stop.

Rest of the code:

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secs: 60,
      started: false
    };
    this.startTimer = this.startTimer.bind(this);
    this.countdown = this.countdown.bind(this);
  }

  countdown() {
    this.setState({ secs: this.state.secs - 1});
  }

  startTimer() {
    const { started } = this.state;
    var timer;
    if (!started) {
      timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(timer);
      this.setState({ started: false });
    }
  }

  render() {
    const { secs } = this.state;
    console.log('secs:', secs)
    console.log('started:', this.state.started);
    return (
      <div className='timer' onClick={this.startTimer}>
        <h2>Session</h2>
        <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1>
      </div>
    );
  }
}

export default Timer;

I've been working on improving my React skills by creating a pomodoro timer app. For some reason I can't seem to get clearInterval working:

startTimer() {
    const { started } = this.state;
    var timer;
    if (!started) {
      timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(timer);
      this.setState({ started: false });
    }
  }

No console errors. Can confirm that it's definitely running that part of the conditional statement (when I log this.state.started it shows false). The timer just keeps ticking and doesn't actually stop.

Rest of the code:

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secs: 60,
      started: false
    };
    this.startTimer = this.startTimer.bind(this);
    this.countdown = this.countdown.bind(this);
  }

  countdown() {
    this.setState({ secs: this.state.secs - 1});
  }

  startTimer() {
    const { started } = this.state;
    var timer;
    if (!started) {
      timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(timer);
      this.setState({ started: false });
    }
  }

  render() {
    const { secs } = this.state;
    console.log('secs:', secs)
    console.log('started:', this.state.started);
    return (
      <div className='timer' onClick={this.startTimer}>
        <h2>Session</h2>
        <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1>
      </div>
    );
  }
}

export default Timer;

• javascript
• reactjs
• clearinterval

Share Improve this question Follow asked May 24, 2017 at 0:15 doctopusdoctopus 5,6671313 gold badges6565 silver badges118118 bronze badges 2

• You do understand that timer gets reset every time you call the function so you're not keeping the timer's ID? – Andrew Li Commented May 24, 2017 at 0:17
• No otherwise i wouldn't have asked the question to begin with – doctopus Commented May 24, 2017 at 0:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Initialize this.timer in the constructor. Then create the setInterval and assign it to this.timer, which will allow you to clear it later.

import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      secs: 60,
      started: false
    };
    this.timer = null;
    this.startTimer = this.startTimer.bind(this);
    this.countdown = this.countdown.bind(this);
  }

  countdown() {
    this.setState({ secs: this.state.secs - 1});
  }

  startTimer() {
    const { started } = this.state;
    if (!started) {
      this.timer = setInterval(this.countdown, 1000);
      this.setState({ started: true });
    }
    else {
      clearInterval(this.timer);
      this.setState({ started: false });
    }
  }

  render() {
    const { secs } = this.state;
    console.log('secs:', secs)
    console.log('started:', this.state.started);
    return (
      <div className='timer' onClick={this.startTimer}>
        <h2>Session</h2>
        <h1>{this.props.session}:{secs == 60 ? '00': secs}</h1>
      </div>
    );
  }
}

export default Timer;

if you aren't trying to create a class

 if(condition_is_true){
   const checkUntilConditionIsFalse = setInterval(() => {
    if (condition_is_false) {
      clearInterval(checkUntilConditionIsFalse);
    }
  }, 1000);
}

本文标签： javascriptclearInterval not working in React Timer AppStack Overflow