We Keep Coding

Stop function is not working as expected. Need Help. React

So I'm new to React and I have made a timer that increases after clicking on Start. Similarly, I made a stop button to stop the timer and set the variable to 0. But what's happening is it starts again from 0.
Help would be appreciated.
Thanks in Advance.
import React from 'react';
class Timer extends React.Component {
constructor() {
super();
this.state = {
secondsElapsed: 0
};
}
start = () => {
this.setState({
secondsElapsed: this.state.secondsElapsed + 1
});
}
stop = () => {
this.setState({
secondsElapsed: 0
});
}
handleClick = (e) => {
this.interval = setInterval(this.start, 1000);
}
render() {
return ( <React.Fragment><br/>
<ul>
<li><span onClick = {this.handleClick}> Start Timer <br/><br/></span></li>
<li><span onClick = {this.stop}> Stop Timer </span></li>
</ul>
<Resultant new = {this.state.secondsElapsed}/>
</React.Fragment>);
}
}
class Resultant extends React.Component {
render() {
return ( <div>
<h3> Seconds Elapsed: {this.props.new} </h3>
</div>);
}
}
export default Timer;

You have to clear the interval to stop the function from running repeatedly:
stop = () => {
clearInterval(this.interval);
this.setState({
secondsElapsed: 0
});
}
For more details about timing events in JavaScript here.

In your stop(), you are only resetting the secondElapsed state back to 0. You also need to stop the interval from updating the state again.
You can try adding clearInterval(this.interval) in the stop().

Change your stop function to this:
stop = () => {
this.setState({
secondsElapsed: 0
});
clearInterval(this.interval); // You should clear the interval to stop it from incrementing seconds when "stop" is pressed
}

Problem
You are using setInterval by assigning it to a value named interval by this.interval = setInterval() so it starts doing that each second but later after stopping it still uses it because you didn't stop interval so it is making it in the "background".
Solution
You just need to add line with clearing interval in the beginning of your stop function like:
stop = () => {
clearInterval(this.interval)
// rest of code
}
so it will stop running that in the background even if you click on the stop button.

how to keep loading screen for more than 4 seconds?

I am trying to keep the loading screen for at least 4 seconds. But the timer at the end isn't working here's the code
window.addEventListener("load", () => {
const preload = document.querySelector('.preload');
preload.classList.add('preload-finish');
}, 4000);

Use setTimeout
window.addEventListener("load", () => {
const preload = document.querySelector('.preload');
setTimeout(()=>{preload.classList.add('preload-finish')}, 4000)
});

your 2nd parameter is a true or false for bubble/capture
use setTimeout instead
function fName(){
...do something;
}
document.setTimeout(function_name(), 4000)

Idle timer within Vue Component

I am have some issues resetting my timer when no longer idle. I am using Vue Idle for this, which is a wrapper for idle.js.
So I have a modal with the id timeout-modal. When Vue Idle triggers the idle function, I call showWarningMessage.
Within this function, I first display my modal. I then create a timer which my modal uses to do a countdown. So this all works fine.
<script>
export default {
data() {
return {
timerId: 0,
remainingTimeoutSeconds: 10000
}
},
computed: {
second() {
return this.remainingTimeoutSeconds / 1000;
}
},
onIdle () {
this.showWarningMessage();
},
methods: {
showWarningMessage() {
this.$bvModal.show('timeout-modal');
this.warning = true;
this.timerId = setInterval(() => {
this.remainingTimeoutSeconds -= 1000;
}, 1000);
},
}
}
</script>
Now within the modal there is a continue button. When pressed, it should basically reset the above timer. At the moment I have
handleContinueButtonClick(response) {
if (response.data.success) {
console.log("IN")
this.$bvModal.hide('app-timeout-reminder-modal');
clearInterval(this.timerId);
return;
}
}
So what this should do is hide the modal, and then reset the timer back to 10 seconds. It is entering the above as the console is printing IN. The modal is also
hidden when I click OK.
However, the next time the modal is displayed, the timer is already near 0 as it did not reset back to 10.
Is there any reason why I cant get this back to 10 seconds? I thought clearInterval should reset the timer?
Thanks

I thought clearInterval should reset the timer?
Do you mean this.remainingTimeoutSeconds is set automatically when calling clearInterval?
The answer is no.
You need to reset that value as 10000 like blow;
handleContinueButtonClick(response) {
if (response.data.success) {
console.log("IN")
this.$bvModal.hide('app-timeout-reminder-modal');
this.remainingTimeoutSeconds = 10000;
clearInterval(this.timerId);
return;
}
}
or
showWarningMessage() {
this.$bvModal.show('timeout-modal');
this.warning = true;
this.remainingTimeoutSeconds = 10000;
this.timerId = setInterval(() => {
this.remainingTimeoutSeconds -= 1000;
}, 1000);
}

ReactJS ProgressBar value is not updating on par with state.progressValue

I'm currently using
import { Progress } from 'react-sweet-progress';
and before I also tried import { Progress } from 'reactstrap'; which just uses bootstrap 4 ProgressBar.
I have a state that maintains the progressValue, and using audio HTML tag to call in an online audio src and playing it. During timeupdate eventListener, I update my progressValue in my state, and reflect it back by setting the value of <Progress> as this.state.progressValue.
class FooBar extends Component {
state = {
progressValue: 0
}
handleProgress = () => {
this.currentTimeInterval = null;
this.audio.onplay = () => {
this.setState({
progressValue: 0,
play: true
});
this.audio.addEventListener('timeupdate', () => {
this.setState({
progressValue: Math.floor(this.audio.currentTime / this.audio.duration * 100)
}, function() {
console.log(this.state.progressValue);
})
}, true)
this.audio.onpause = () => {
clearInterval(this.currentTimeInterval);
}
}
render() {
return(
<audio
ref={(audio) => { this.audio = audio }}
src={http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02.wav}
autoPlay
onLoadedData={this.handleProgress}
/>
<Progress value={this.state.progressValue} />
);
}
}
The timing, however, doesn't seem to match up where the audio will be playing and the progressValue will be delayed in the sense that audio will be ahead of the progressValue. Hence, by the time audio finishes, it would likely take another 2~3 seconds for the progressBar to reach 100%.
I also tried:
this.currentTimeInterval = setInterval(() => {
this.setState({
progressValue: Math.floor(this.audio.currentTime / this.audio.duration * 100)
}))
}, 100)
and tried manipulating the timeInterval of 100ms to a smaller number, which makes it closer but the delay still exists.
3 Questions:
1) What is causing this to happen?
2) Is there a way to fix this?
3) If the answer is 'no' to 2), is there another component I can use to display the progress of an audio file? (Not the default controls from audio tag).
Thank you!

starting and stopping a timer with jquery in hover

how would you guys reinitiate a javascript timer after it's been stopped. Basically I need the timer to stop, and then start again on rollout of a div. I have
var timer = setInterval(myFunction, 1000);
timer
function myFunction(){<br/>
if(){
do this
}
else if () {
do this
}
};
then I have
$("td").hover(
function () {
window.clearInterval()
},<br/>
function () {
timer
}
);
all works good except it doesn't start again on hover off. If I put a new timer in hover off the timer starts to speed up every time you hover on and off.... Any ideas.
Thanks

var intervalID = setInterval(myFunction, 1000);
function myFunction(){
//logic goes here
};
$("td").hover( function () {
window.clearInterval(intervalID)
},
function () {
intervalID = setInterval(myFunction, 1000);
} );
Explanation: What's happening is that the setInterval is returning the ID associated with that interval.
I did a littse jsFiddle to show it works.
NOTE: this doesn't pause the current Interval. It stops it and starts it again. So if you were in a 10sec interval at 9 secs and stopped it. When it starts again it will take another 10secs.