How to use Timer?
React js provides default timer and its functions without installing any packages.
There are mainly 3 functions used to setup timer in your React component
-
setInterval()
-
clearInterval()
-
tick()
1. setInterval()
-
setInterval function will set the timer and call its tick event.
-
You should clear old timer before starting new timer.
-
To set the timer you need to pass two arguments in setInterval function.
-
tick event
-
interval in milliseconds
-
Syntax:
this.timer = setInterval(this.tick.bind(this), 1000);
2. clearInterval()
-
To clear current running timer you need to use this function.
-
You should clear timer before starting new timer and before leaving component, so if you render same component multiple times in the same page at that time it starts from default timer value instead of value from where you left.
-
Syntax
clearInterval(this.timer);
3. tick()
-
This event will be called based on time interval you placed in setInterval() function.
-
You have to place interval in milliseconds.
-
If you set interval 1000 then it will call tick function every second.
-
If you want to show countdown to users then you can change countdown value in this function.
-
For that you need to take one default value in your component state and increase/decrease it by 1 as per your requirement and restore in state. It will change countdown value every second and show you updated value in your component.
-
If you use countdown, at that point you need to check condition that if countdown goes to zero, at that point call clearInterval() to stop timer.
tick() {
this.setState({
remainingTime: this.state.remainingTime - 1
},() => {
if(this.state.remainingTime == 0){
clearInterval(this.timer);
}
});
}
Where to use Timer?
-
You can use timer where you want to take user response within specific time limit. For ex. you want to make quiz with multiple questions and for each question you want to add countdown to take answers from users. At that time you can add a timer to your questions.
-
If you use swiper slider for that, then you need to add each question in different slide with different countdown(in seconds).
Timer implementation in swiper
Problems
-
You can’t load all slide at once
-
You can’t add all slides in single component
Solutions
-
You need to make different components for each slide
-
You have to add slides manually one by one
How to use timer in swiper?
-
To use timer in each slide with different countdown you have to add slides one by one.
-
After completing work on first slide enable next slide button.
-
When user click on that button it will add new slide component to swiper and move swiper to that slide.
-
When next slide component load it automatically start countdown as we have added setInterval() in componentDidMount() method.
-
To clear timer value you should write clearInterval() function with timer object in your componentWillUnmount() method.
Conclusion
So now you can easily integrate timer with your swiper slider by following above functions and instructions. You can get complete source code with all resources and functionalities from GitHub.
