javascript - How to reset the timer component upon completion - Stack Overflow

admin管理员组

文章数量:1397049

I am trying to build a timer ponent using the react-countdown-now package: .

I was having trouble to reset the timer so that it moves on to the next time on the schedule.

I have been trying to use key property in props it pass it in an array of times to wait till (it was in the documentation). In reality I would get these values of a schedule from a server side method.

Currently I have

Component:

<Countdown
     date={Date.now() + 5000}
     key = {timeDelays}
     intervalDelay={0}
     precision={3}
     renderer={timerRenderer}
/>

Supporting functions and Values:

//These time values are most probably going to be in JSON format, 
//and probably will contain EPOCH times for scheduled events

const timeDelays = [2000,4000,3000,15789,2345794];

// Random ponent
const Completionist = () => <span>You are good to go!</span>;

// Renderer callback with condition
const timerRenderer = ({ hours, minutes, seconds, pleted }) => {
     // if (pleted) {
        //     Render a pleted state
        //     return <Completionist />;
     // } else {
     //     // Render a countdown
            return <span>{hours}:{minutes}:{seconds}</span>;
     //}
};

I want it to start with a countdown from the list and then when pleted move onto the next schedule value from the list.

I am trying to build a timer ponent using the react-countdown-now package: https://www.npmjs./package/react-countdown-now#key.

I was having trouble to reset the timer so that it moves on to the next time on the schedule.

I have been trying to use key property in props it pass it in an array of times to wait till (it was in the documentation). In reality I would get these values of a schedule from a server side method.

Currently I have

Component:

<Countdown
     date={Date.now() + 5000}
     key = {timeDelays}
     intervalDelay={0}
     precision={3}
     renderer={timerRenderer}
/>

Supporting functions and Values:

//These time values are most probably going to be in JSON format, 
//and probably will contain EPOCH times for scheduled events

const timeDelays = [2000,4000,3000,15789,2345794];

// Random ponent
const Completionist = () => <span>You are good to go!</span>;

// Renderer callback with condition
const timerRenderer = ({ hours, minutes, seconds, pleted }) => {
     // if (pleted) {
        //     Render a pleted state
        //     return <Completionist />;
     // } else {
     //     // Render a countdown
            return <span>{hours}:{minutes}:{seconds}</span>;
     //}
};

I want it to start with a countdown from the list and then when pleted move onto the next schedule value from the list.

• javascript
• reactjs
• ecmascript-6
• timer

Share Improve this question Follow edited May 7, 2019 at 19:26 Daniyal Maniar asked May 7, 2019 at 18:57 Daniyal ManiarDaniyal Maniar 9511 silver badge99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

This is a total change from the former answer, which used a class-based ponent.

First, we'll need to import React and React hooks to our ponent file.

import React, { useState } from 'react';

Next, we'll declare a React function ponent and use React hooks to maintain state.

function MyCountdownTimer({ times }) {
    // a hook for the current time index
    const [currentTimeIndex, setCurrentTimeIndex] = useState(0);
    // a hook for the current time
    const [currentTime, setCurrentTime] = useState(null);
    // return a render
    return (
        <Countdown
            date={currentTime}
            key={currentTimeIndex}
            onComplete={() => {
                // dont's move to next time if just done with last time
                if(times.length - 1 <= times.indexOf(currentTime)) return;
                // move to next time index
                setCurrentTimeIndex(currentTimeIndex + 1);
                // reset current time
                setCurrentTime(new Date(times[currentTimeIndex + 1]));
            }}
            renderer={({ hours, minutes, seconds, pleted }) => {
                // render pleted
                if (pleted) return <span>You are good to go!</span>;
                // render current countdown time
                return <span>{hours}:{minutes}:{seconds}</span>;

            }}
        />
    );
}

An implementation of this would look something like so.

let times = [...] // an array of times

<MyCountdownTimer times={times} />

React hooks are still a bit new so for a better understanding on React Hooks you can follow this link https://reactjs/docs/hooks-intro.html.

NOTE

1. You need a way to tell what time you're currently on so within your ponent you'll have two things. The list of times(times) as an array this should be passed as a prop as suggested in the code above, the index of the current time(currentTimeIndex) as an integer and the current time(currentTime) as a Date object.

2. You'll need to listen for when the timer hits zero using the onComplete property to define a callback method, we do not update the ponent's state when the Countdown timer has been pleted.

3. A key property on the Countdown ponent, this is meant to change for each time you want to reset the countdown timer and since we're incrementing the index to go to the next time we'll simply use the index of the current time.

4. I reduced the code of your renderer so you can render what you need to within the same function, except if you will be adding a lot more code in there than that.

5. This is using a function ponent with hooks to maintain state.

6. The date according to the documentation can be a date object.

Just you need to change the value of key attribute key={new values or updated value} so automatically re set the timer.

key This is one of React's internal ponent props and is used to identify the ponent. However, we can leverage this behaviour and use it to, for example, restart the countdown by passing in a new string or number.https://www.npmjs./package/react-countdown

I guess my translated ponent would look like this

const WebPage = (props) => {
        const timerState = {
                times:[Date.now()+5000,Date.now()+12000,Date.now()+17000,Date.now()+22000],
                currentTimeIndex: 0,
                currentTime: Date.now(),
        } ;
        const timerRenderer = ({ hours, minutes, seconds, pleted }) => {
                if (pleted) return <span> No more Scheduled time</span>;
                return <span>{hours}:{minutes}:{seconds}</span>;
        };
        const pleteTime = () => {
                if (timerState.times.length - 1 <= times.indexOf(timerState.currentTime)) return;
                // move to next time
                timerState.currentTimeIndex++;
                timerState.currentTime = new Date(timerState.times[timerState.currentTimeIndex+1])
        };
        return (
                <Countdown
                     date={timerState.currentTime}
                     key = {timerState.currentTimeIndex}
                     onComplete={pleteTime}
                     intervalDelay={0}
                     precision={3}
                     renderer={timerRenderer}
                />
        ) 
}

It's not exactly working as it by default goes to "No more Scheduled time", and if I get rid of the if(pleted) it just stays at 0:0:0.

本文标签： javascriptHow to reset the timer component upon completionStack Overflow