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

Question

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?

Possible duplicate of [How to clearInterval with unknown ID?](http://stackoverflow.com/questions/6843201/how-to-clearinterval-with-unknown-id) — Daniel Beck, May 25 '16 at 13:53
What do you mean it's not working. Could you please provide a minimal runnable example of the code you'd like to fix — Regis Portalez, May 25 '16 at 13:57
What do you mean by "is not working" - is it that you can't call `stop()` because it's scoped within the `onload` function, and you're calling it from elsewhere? Your question still isn't 100% clear. — James Thorpe, May 25 '16 at 14:14

Regis Portalez · Accepted Answer · 2016-05-25T14:51:00.057

2

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

edited May 25 '16 at 14:51

answered May 25 '16 at 14:39

Regis Portalez

4,675
1
29
41

Tried just now to put the function inside the object, but doesn't work https://jsfiddle.net/s8ex0ed0/5/ – neoDev May 25 '16 at 14:47
Edited. To me it's a jsfiddle bug. Found a workaround – Regis Portalez May 25 '16 at 14:51
I found a simpler way to do it, please see my own answer – neoDev May 25 '16 at 15:41

score 1 · Answer 2 · edited May 23 '17 at 11:44

1

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?

edited May 23 '17 at 11:44

Community

1
1

answered May 25 '16 at 13:57

Anialation

76
3

It does not work for me, please can you show how it should be done? – neoDev May 25 '16 at 14:28
Looking at the JSFiddle code I see the problem now. Since the `stop()` function is being called with an `onClick=""`, the scope is getting changed. Using an event listener on the button works a lot better. This is raw JS, it's easier with jQuery. [Click here to see the fix](https://jsfiddle.net/s8ex0ed0/2/) – Anialation May 25 '16 at 14:34
I cannot use addEventListener – neoDev May 25 '16 at 14:38
@neoDev: Sure you can. – T.J. Crowder May 26 '16 at 00:31

score 1 · Answer 3 · answered May 25 '16 at 15:39

1

I found also this solution working:

stop = function(){
    clearInterval(interval);
}

answered May 25 '16 at 15:39

neoDev

2,879
3
33
66

Makes me wonder too, When I decided to see If I can answer this question - it was showing at the top of 5 most recent questions. And while I was writing my answer all other answers were showing under 50 minutes old, and while I was being halted by St.Ov. from posting the fiddle without providing some code inside the answer body and finally posted it - my answer was showing only 2 minutes late, compared to this one. I'm puzzled too. Probably a cash glitch on my outdated browser or a time-zone mismatch. – Bekim Bacaj May 26 '16 at 00:47
No, I realised it before your answer. Everybody can see my answer is earlier than yours. Regards – neoDev May 27 '16 at 09:29

score 0 · Answer 4 · answered May 25 '16 at 23:54

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);
}

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

4 Answers4