CODEWITHSUNDEEP
javascriptjqueryajaxsetinterval
xnanitox
xnanitox

Reputation: 495

Check if an Interval is running and viceversa

So i have a web app with basic authentication.

When im logged in, an Interval is set:

$("#login").click(function(e) { 
var interval = setInterval(function(){myFunction();}, 2000); });

Then when im logged out i need to stop the interval:

$("#logout").click(function(e) { 
if(typeof interval !== 'undefined') clearInterval(interval); });

But it doesnt work, i think the way to check if an interval exist is wrong...i can set the interval so it is running when im logged in, but i need to stop/clear it when i click on my Logout button and it doesnt...

PS. im using the interval to check "myFunction" automatically every 2 seconds, but maybe there is another way to accomplish this without an interval? thx

Upvotes: 30

Views: 56516

Answers (2)

jameshwart lopez
jameshwart lopez

Reputation: 3131

Here is a simple example where your interval variable should be in global scope for both click events.

<!DOCTYPE html>
<html>
<head>
    <title></title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
      <script type="text/javascript">
      $(document).ready(function(){
            function myFunction(){
                var d = new Date();
                var t = d.toLocaleTimeString();
                document.getElementById("demo").innerHTML = t;
            }
            var interval;

            $("#start").click(function(){
                interval = setInterval(function(){
                        myFunction();
                },2000);

            });

            $("#stop").click(function(){
                clearInterval(interval);
            });


      });
      </script>
</head>
<body>
    <p id="demo"></p>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
</body>
</html>

Upvotes: 1

jfriend00
jfriend00

Reputation: 707318

Your interval variable needs to be declared at a higher scope where it is available to both functions. As you have it now, it is a local variable that ONLY exists within the particular invocation of your event handler function. So, when the next event handler is called, that previous variable no longer exists. You may also want to protect against successive clicks on login:

var interval;
$("#login").click(function(e) { 
    if (!interval) {
        interval = setInterval(function(){myFunction();}, 2000); 
    }
});

$("#logout").click(function(e) { 
    clearInterval(interval); 
    interval = null;
});

And, you don't need to check to see if interval is undefined. You can just call clearInterval() on it and clearInterval() will protect against any invalid argument you pass it.

Upvotes: 56

Related Questions