Question 223003 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Stopping a timer in React

I made this simple React program. Can someone tell me why the stop button doesn’t work? Shouldn’t the boolean statement stop it from repeating after I click the stop button?

import "./styles.css";
import { useState, useEffect } from "react";
import { Text, TextInput, View, Image, Button } from "react-native";

export default function App() {
  const [time, setTime] = useState(0);
  const [stopped, setStopped] = useState(false);

  function start() {
    if (stopped == false) {
      setTimeout(() => {
        setTime((time) => time + 1);
        start();
      }, 1000);
    }
  }

  return (
    <View>
      <Text>{time}</Text>
      <Button onPress={start} title="Start Timer" />
      <Button onPress={() => setStopped(true)} title="Stop Timer" />
    </View>
  );
}
Tags:

2

Answers


  1. 0

    The reason the "Stop Timer" button doesn’t work as expected is due to how the setTimeout function works. Even when you set stopped to true, the existing timeout function that was triggered before will still execute. This is because the setTimeout function schedules a single execution of the provided function after a specified delay, and changing the stopped value will not cancel or interrupt the ongoing timeout.

    To achieve the behavior you want, you can use the clearTimeout function to cancel the ongoing timeout when the "Stop Timer" button is pressed

    export default function App() {
  const [time, setTime] = useState(0);
  const [stopped, setStopped] = useState(false);
  const [timerId, setTimerId] = useState(null);

  function start() {
    if (!stopped && timerId === null) {
      const id = setTimeout(() => {
        setTime((prevTime) => prevTime + 1);
        start();
      }, 1000);
      setTimerId(id);
    }
  }

  function stop() {
    if (timerId !== null) {
      clearTimeout(timerId);
      setTimerId(null);
    }
    setStopped(true);
  }

  return (
    <View>
      <Text>{time}</Text>
      <Button onPress={start} title="Start Timer" disabled={stopped} />
      <Button onPress={stop} title="Stop Timer" disabled={!stopped} />
    </View>
  );
}

    Edit: Also add a useEffect to clean up the timeout when the component unmounts.

    Login or Signup to reply.
  2. 0

    In React Native, you can use the setTimeout and clearTimeout functions to start and stop a timeout respectively when a button is clicked. Here’s how you can do it:

    Set up a state variable to track the timeout status (active or inactive).

    Create a function to start the timeout when the button is clicked.

    Create another function to stop the timeout when the button is clicked again or another event occurs.

    Here’s an example implementation:

    import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const TimeoutApp = () => {
  const [isTimeoutActive, setIsTimeoutActive] = useState(false);

  // Function to start the timeout
  const startTimeout = () => {
    setIsTimeoutActive(true);
    setTimeout(() => {
      // Perform actions after the timeout (e.g., navigate, show alert, etc.)
      console.log('Timeout completed!');
      setIsTimeoutActive(false);
    }, 5000); // Timeout duration: 5 seconds (5000 milliseconds)
  };

  // Function to stop the timeout
  const stopTimeout = () => {
    setIsTimeoutActive(false);
    clearTimeout(); // Clear the timeout to prevent it from executing
  };

  return (
    <View>
      <Text>Timeout Status: {isTimeoutActive ? 'Active' : 'Inactive'}</Text>
      <TouchableOpacity onPress={isTimeoutActive ? stopTimeout : startTimeout}>
        <Text>{isTimeoutActive ? 'Stop Timeout' : 'Start Timeout'}</Text>
      </TouchableOpacity>
    </View>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search