如何在此计时器中添加暂停功能？ 反应母语

Question

//Importing different files

import * as React from 'react';
import { Text, View, StyleSheet,Button } from 'react-native';
import { Constants } from 'expo';
import AssetExample from './components/AssetExample';

//Creating a stylesheet

const styles = StyleSheet.create({
  appContainer : {
    flex :1 ,
    alignItems : 'center',
    justifyContent : 'center',
  },
  text : {
    fontSize : 40 ,
  }
})

export class App extends React.Component{

//Creating a constructor function and setting state here

  constructor(props)
  {
    super(props)
    this.state = ({
      minutes : 0,
      seconds : 4,
      pause : false,
  })
}

//Timer starting function for minutes and if it gets decreased by 1 then automatically set the seconds state.

startTimer = () => {
  this.setState({
     minutes : this.state.minutes - 1,
    seconds : 4
    })
 }

//Timer2 for decreasing seconds by 1 every instant.

 startTimer2 = () => {
  this.setState({
    seconds : this.state.seconds - 1 

  })
  console.log(this.props.toggle)

 }

//Setting interval for both timers here.

 componentDidMount = () => {
 this.interval = setInterval(this.startTimer , 5000)
   this.interval2 = setInterval(this.startTimer2 , 1000) 
 }

//Don't update if minutes gets below zero.

 shouldComponentUpdate = (nextProps , nextState) => {
 if(nextState.minutes >= 0 ) 
 {
 return( 

true
 )
 }

// JUST clear INterval if it gets below

 else {
  clearInterval(this.interval)
  clearInterval(this.interval2)
   }
   }

//Component will get unmount

   componentWillUnmount = () => {
   clearInterval(this.interval)
   clearInterval(this.interval2)
   }

//Toggler for pausing the time

   pauseTimer = ()=> {
                  this.setState({
                      pause : !this.state.pause
                                               })
                                   }

//A render function

         render() {

                  if(this.state.minutes === 0  && this.state.seconds === 0)
 {
     return(
      <View style = {styles.appContainer}>
  <Text style ={styles.text}>
  Break is over
  </Text>

  </View>
    )

    }
     else if (this.state.pause === false)
     {

     return (
     <View style = {styles.appContainer}>
     <Text style ={styles.text}>
     {this.state.minutes} : {this.state.seconds}

      </Text>
      <Button title = "Pause" onPress = {()=>this.pauseTimer()} 
      />

      </View>
      )
      }

    else {

     return (
     <View style = {styles.appContainer}>
     <Text style ={styles.text}>
      {this.state.minutes} : {this.state.seconds}
                Paused
          </Text>
      <Button title = "Start again" onPress = {()=>this.pauseTimer()}/>
     </View>
         )

       }

      }

Answer 1

I have created a short snippet in pure javascript, showing how to stop and restart an interval.

It also shows how you can calculate minutes and seconds with one counter.

Sorry, but I have not implemented this in React! You still have to implement this in your React template, but the setInterval logic and the seconds counter should work the same.

let id;
let paused = true;
let seconds = 0;
let btn = document.querySelector("#btn");

btn.addEventListener("click", ()=>{
  toggleTimer();
});

function startTimer(){
  id = setInterval(()=>{
    seconds++;
    let minutes = Math.floor(seconds/60);
    let sec = seconds%60;
    console.log(minutes + " : " + sec);
  }, 100);
}

function stopTimer(){
  clearInterval(id);
}

function toggleTimer(){
  console.log(paused);
  if(paused){
    paused = false;
    startTimer();
  } else {
    paused = true;
    stopTimer();
  }
}