how to combine setInterval with mouseenter? - php

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

Answer 1

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.

Answer 2

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

Answer 3

$(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);
}
});
});
​