how to combine setInterval with mouseenter?

Question

I am trying to make it so a div refreshes with ajax. The code itself is implemented and working already. I want the div to refresh every 30 seconds but only on an active tab. From what I understand setInterval will refresh every time regardless of whether the tab is in use or not. Id like to combine a mouseenter (or some other kind of user interaction that implies the user is active on the site) with setInterval so that the setInterval doesnt get fired if inactive.

currently I have this code which works well on the initial page load. There is no refresh during the first 30 seconds, nor is there a refresh until mouseenter on the div. However after the initial 30 seconds it refreshes on every mouseenter.

$(document).ready(function(){

    $("#container").hide();
    $("#loading").show();
    $("div#refresh").load('example.com/load.php', function(){ $("#container").show(); $("#loading").hide(); });

    function refresh() {
        $("#refresh").mouseenter(function() {
        //  $("#container").hide();
            $("#loading").show();
            $("div#refresh").load('example.com/load.php', function(){ $("#container").show(); $("#loading").hide(); });
        });
        clearInterval(intervalID);
    }

    var intervalID = setInterval(refresh, 30000); // Will alert every 30 second.
    // clearInterval(intervalID); // Will clear the timer.

});

What you actually want is [How to tell if browser/tab is active](http://stackoverflow.com/questions/1760250/how-to-tell-if-browser-tab-is-active) (flagged as duplicate) — Bergi, Aug 26 '12 at 15:48
@Šime Vidas for the duplicate code, if your talking about the inside of the refresh funtion and outside of it, its there so that it loads on initial page load. if i omit it, the page doesnt refresh until after the 30 seconds and mouseenter — cwal, Aug 26 '12 at 15:54
@cwal: Yes, but it is still duplicate code. Just call `refresh()` instead of repeating the code.… — Bergi, Aug 26 '12 at 16:44

MaxArt · Accepted Answer · 2012-08-26T16:48:31.463

4

Just set the interval when the mouse cursor is in the tab you want, and clear it when it's outside:

var intervalID, lastRefresh = 0;
$("#refresh").mouseenter(function() {
    var diff = new Date().getTime() - lastRefresh;
    intervalID = setTimeout(function() {
        refresh();
        intervalID = setInterval(refresh, 30000);
    }, 30000 - diff);
}).mouseleave(function() {
    clearInterval(intervalID);
});

function refresh() {
    $("#loading").show();
    $("div#refresh").load('example.com/load.php',
            function(){ $("#container").show(); $("#loading").hide(); });
    lastRefresh = new Date().getTime();
}

Now the <div> is refreshed in the instant the mouse enters inside its borders, and every 30 seconds from that moment. This stops when the mouse leaves the <div>.

If the mouse enters again, it checks for the last time the refresh function was called. If less than 30 seconds have passed, it waits until 30 seconds pass.

Pro-tip: clearInterval also clears timed events generated by setTimeout, just like clearTimeout cancels setInterval.

edited Aug 26 '12 at 16:48

answered Aug 26 '12 at 15:50

MaxArt

22,200
10
82
81

does this start the count on mouseenter only? meaning the cursor has to be left inside div for 30 seconds before it refreshes? or if the cursor enters the div and its been more than 30 seconds since the last refresh it refreshes right away on mouseenter? – cwal Aug 26 '12 at 16:12
The cursor has to be left inside `#refresh` for 30 seconds to get it refreshed. Isn't this the behaviour you wanted to create? – MaxArt Aug 26 '12 at 16:17
in a way yes. but I would also like for when a user returns to the tab and mouseenter's that it refreshes right away if its been more than 30 seconds. It's possible @Bergi comment and link is more approriate for the behaviour im looking for. although your answer is the correct one to my question. – cwal Aug 26 '12 at 16:23

score 0 · Answer 2 · answered Aug 26 '12 at 15:53

Try this:

$(document).ready(function(){
    var intervalID;
    $("#container").hide();
    $("#loading").show();
    $("div#refresh").load('example.com/load.php', function(){ $("#container").show(); $("#loading").hide(); });

function refresh() {
        //  $("#container").hide();
            $("#loading").show();
            $("div#refresh").load('example.com/load.php', function(){ $("#container").show();     $("#loading").hide(); });
    }

 $("#refresh").mouseenter(function() {
     intervalID= setInterval(refresh, 30000); 
  });

$("#refresh").mouseleave(function() {
  clearInterval(intervalID);
 });

score 0 · Answer 3 · answered Aug 26 '12 at 15:56

$(function(){
    var intervalID;
    $("#container").hide();
    refresh();

    function refresh() {
        $("#loading").show();
        $("div#refresh").load('example.com/load.php', function(){
            $("#container").show(); 
            $("#loading").hide(); 
        });
    }
    $("#refresh").on({
        mouseenter: function() {
            intervalID = setInterval(refresh, 30000);
        },
        mouseleave: function() {
            clearInterval(intervalID);    
        }
    });
});

how to combine setInterval with mouseenter?

3 Answers3