Why I can not clearInterval in the following example? - javascript

I have the following issue. While the timer_mou starts counting, when the pause equals closeit it does not clear the interval.
What am I missing here?
function my_timer(pause){
console.log('function: '+pause);
var timer_mou = setInterval(function() {
console.log('counting');
}, 5000);
if (pause == 'closeit') {
clearInterval(timer_mou);
}
}

Just put the setInterval out of the pause function to define the variable timer_mou in the global scope, then when you call your function it will clear it correctly, instead of defining it on every call of the function, check the working example below.
Hope this helps.
var i = 0;
var timer;
start();
$('#pause').on('click',function(){
pause()
})
$('#restart').on('click',function(){
restart()
})
function pause(){
clearInterval(timer);
}
function restart(){
i=0;
pause()
start();
}
function start(){
timer = setInterval(function() {
i++;
console.log('Counting '+i);
},1000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='pause'>Pause</button>
<button id='restart'>Restart</button>

You need to define timer_mou outside of the function. In your case you won't be able to clear the timer as you have lost reference to the timer and you create a new timer instance with every function call.
Try something like:
var timer_mou;
function start_timer() {
timer_mou = setInterval(function() {
console.log('counting');
}, 5000);
}
function stop_timer() {
clearInterval(timer_mou);
}

This is a very annoying problem that has to do with scope. When you declare the setInterval inside of your function, the only place you can clear it is inside of that iteration of the function. So,
my_timer("") //Starts a timer in the function
my_timer("closeit") //Starts a timer in the function, then stops it
//with the other timer running in the background
You can reduce the problem to the fact that your interval gets declared multiple times, and you can only stop it inside of the function. So, if you want the my_timer function to start the timer, but stop if you give it the parameter of "pauseit", you could implement something like this:
function my_timer(pause){
console.log('function: '+pause);
if(typeof timer_mou === "undefined"){ //If the interval already exists, don't start a new one
timer_mou = //Defines in global scope
setInterval(function() {
console.log('counting');
}, 5000);
}
if (pause == 'closeit') {
clearInterval(timer_mou);
}
}
So, in the new version of your function, it checks if the interval is defined, and if not, defines it in the global scope so you can remove it later.
Done on mobile, so that's my excuse for bad formatting and spelling errors.

Related

call clear interval function from another function without pass the interval variable

I need to clear an interval from another function
window.onload = function(){
var interval = null;
interval = setInterval(function(){
myFunction();
}, 1000);
function stop(){
clearInterval(interval);
}
}
without pass the interval variable
stop();
But I cannot make it working: when I call stop(); the interval continues...
How can I do?
There is an unexpected window.stop function which preexists yours.
That's another proof that global variables/functions are evil.
It might be this function which gets invoked instead of yours, depending on when the script is loaded.
Try to put your function in an object to protect namespaces:
It works in the StackOverflow fiddle:
var i = 0;
function myFunction() {
i++;
console.log(i);
}
var interval = null;
interval = setInterval(function() {
myFunction();
}, 1000);
var myObject = {
stop: function() {
console.log("stopping");
clearInterval(interval);
}
};
<button onclick="myObject.stop();">stop</button>
In the faulty jsFiddle, you get things in iframes, meaning window element is not the same. That's why your function is not invoked. That gives you that kind of errors:
You can put your script in the html to get it working:
jsfiddle
You could simply put something like var interval = null; at the beginning of the JavaScript outside of a function.
It's all about variable scope. A variable defined inside of a function is only available within that function. A variable defined outside of a function or object will be available globally to all functions.
What is the scope of variables in JavaScript?
I found also this solution working:
stop = function(){
clearInterval(interval);
}
The presumption on the answer you've checked as solution is wrong.
Your stop function wouldn't be working regardless of the fact that there are browsers supporting load stop command programmatically.
This [stop] command is a window property and can be deleted and\or be overwritten by a simple variable declaration or by a function with the same name anywhere on the script.
The reason you are not being able to call the stop function ( from the outside ), is because it's a closure.
Regards.
p.s.:
throwing it up on global scope will make it work, visit you fiddle
var i=0;
function myFunction(){
i++;
$('i').html(i);
}
interval = null;
interval = setInterval(function(){
myFunction();
}, 100);
stop = function(){
clearInterval(interval);
}

Why does setInterval initiate when I'm only assigning it?

I'm assigning to a variable, a function that uses setInterval, but I don't want the function to run until I call it. However, the function is running from just the assignment statement.
sessionClock = setInterval(function() {
console.log("Hi")
}, 1000)
I have also tried like this:
sayHi = function() {
console.log("Hi");
}
var sayHiStarter = setInterval(sayHi, 1000);
Both of these initiate the function and will log "Hi" to the console.
Why is it running on assignment? And what can do I do fix this?
If you only want to bind a function to setInterval, but call it later, you can use bind:
var sessionClock = setInterval.bind(null, function() {
console.log("Hi")
}, 1000);
//... later
var myInterval = sessionClock(); // start the timer
// ... later if you need to clear it
clearInterval(myInterval);
In principle, bind returns a new function that calls your original function (in this case, setInterval) with predefined arguments. So when you call sessionClock, that returned function is called. There a other aspects to bind, but they don't seem to apply in this context.
The call to setInterval does not return a function, but an identification for the created interval. This id is used to remove the interval when you don't want it to execute anymore:
sessionClock = setInterval(function() {
console.log("Hi")
}, 1000)
...
clearInterval(sessionclock);
What you want is something like this:
sessionClock = function () {
return setInterval(function() {
console.log("Hi")
},
1000);
}
//When needed
var intervalId=sessionClock();

Can I stop the execution of a function from outside that function?

I have this code:
function toStop(){
while(true){}
}
toStop();
Now, how can I stop this? Or how can I kill the current thread if this function call is somewhere in the setInterval running thread? Example:
var id = setInterval(function(){
toStop();
}, 1000);
//stop thread/timer with id here.
clearInterval doesn't work because it waits until the function call ends.
Thanks!
"Can I stop the execution of a function from outside that function?"
No, you can't programmatically.
JavaScript is single-threaded and if you run a piece of code that makes it infinitely busy, such as while(true);, then nothing else will ever be able to execute.
Calling such a piece of code within setTimeout or setInterval will have the same result, since the callback of these gets executed in the only thread we have as well.
However, you can create a timed recurring execution using setInterval or setTimeout, which can be stopped.
var timerId = setInterval(function () {
//Process an iteration of the loop in here
//If you cause an infinite loop in here, you will have the same issue
}, 50);
//stop the timer after ~3 seconds
setTimeout(clearInterval.bind(null, timerId), 3000);
Notes:
4 is the lowest interval that could be honored as specified in the SPEC.
setInterval will stack if the callback takes more time to execute than the specified interval. For that reason I never use setInterval and always use setTimeout.
Timer intervals are not guaranteed to be accurate
e.g. with setTimeout
var stopProcessing = startProcessing();
//Stop processing after ~3 seconds
setTimeout(stopProcessing, 3000);
function startProcessing() {
var timerId;
!function process() {
//Do some processing
//Continue processing in ~50 ms
timerId = setTimeout(process, 50);
}();
return function () { clearTimeout(timerId); }
}
Instead of an infinite loop, just use an if statement and wrap it in an interval:
var shouldContinue = true;
var interval = 0;
function toStop() {
if (interval == 0) {
interval = setInterval(function() {
if(shouldContinue) {
...
}
else {
clearInterval(interval);
interval = 0;
}
}, 200); // Or whatever interval makes sense
}
}
toStop();
// ...
shouldContinue = false;
See this principle in action here.
No, you can't programmatically, as #plalx said but you could try this: declaring a binding outside and check on that to continue or stop the loop:
let letMeGoOut;
function toStop(){
while(letMeGoOut != false)
}
toStop();
Here, I've created a function on mouseover that triggers a loop changing the opacity of the h1. It goes on till the mouse cursor moves out and is over something else in the page.
Here is the example: https://codepen.io/Mau-Di-Bert/pen/VqrRxE

Referencing Non-Global Variable for Timer JS

I have this function.
function changeFrame(){
var time = setInterval(start, 250);
}
and I want to stop it from firing in another function, but haven't been able to figure out how to do it.
Do you mean this?
function changeFrame(){
var time = setInterval(function() {
// Do stuff
}, 250);
}
Think it's in the comments.
Ok amended the fiddle to do what you want. I made time a global var. Call clearInterval in stop with the global var http://jsfiddle.net/QNWF4/3/
In order to call clearInterval you need to have the handle returned by setInterval. That means something will either be global to the page or global to a containing function in which your script resides.
function Timer()
{
var handle = null;
this.start = function (fn,interval) {
handle = setInterval(fn,interval);
};
this.stop = function ()
{
if (handle) { clearInterval(handle); handle = null; }
};
return this;
}

'Looping' JavaScript functions

I have the below script.
function slideShow1(){
document.getElementById('dynimg').src="Other/noctis.jpg";
var timer1 = setTimeout(slideShow2(),5000);
}
function slideShow2(){
document.getElementById('dynimg').src="Other/retriever.jpg";
var timer2 = setTimeout(slideShow3(),5000);
}
function slideShow3(){
document.getElementById('dynimg').src="Other/miningop2.jpg";
var timer3 = setTimeout(slideShow1(),5000);
}
It's crude, I know... And it's also not working. The idea is for each function to trigger the next after a given period and therefore creating a slideshow where and img is changed repeatedly. I am trying to use body onload="slideShow1()"
Those parentheses are causing your function to be executed immediately.
setTimeout(slideShow2(), 5000);
As such, you think you're passing your function to setTimeout but you're actually executing your function and passing its return value (undefined in this case).
So, your function gets called immediately and setTimout has nothing to execute five seconds later.
Just remove the parentheses:
function slideShow1(){
document.getElementById('dynimg').src = "Other/noctis.jpg";
setTimeout(slideShow2, 5000);
}
function slideShow2(){
document.getElementById('dynimg').src = "Other/retriever.jpg";
setTimeout(slideShow3, 5000);
}
function slideShow3(){
document.getElementById('dynimg').src = "Other/miningop2.jpg";
setTimeout(slideShow1, 5000);
}

Categories