Comment combiner setInterval avec mouseenter ?

Question

J'essaie de faire en sorte qu'une div se rafraîchisse avec ajax. Le code lui-même est implémenté et fonctionne déjà. Je veux que la div se rafraîchisse toutes les 30 secondes mais seulement sur un onglet actif. Je ne suis pas sûr que ce soit le cas, mais j'ai compris que setInterval rafraichissait à chaque fois, que l'onglet soit utilisé ou non. J'aimerais combiner un mouseenter (ou un autre type d'interaction utilisateur qui implique que l'utilisateur est actif sur le site) avec setInterval afin que le setInterval ne soit pas déclenché s'il est inactif.

J'ai actuellement ce code qui fonctionne bien lors du chargement initial de la page. Il n'y a pas de rafraîchissement pendant les 30 premières secondes, et il n'y a pas non plus de rafraîchissement jusqu'à ce que la souris entre dans la div. Cependant, après les 30 premières secondes, il y a un rafraîchissement à chaque entrée de la souris.

$(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

Il suffit de définir l'intervalle lorsque le curseur de la souris se trouve dans l'onglet souhaité et de l'effacer lorsqu'il en est sorti :

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

Aujourd'hui, le <div> est actualisé au moment où la souris entre dans ses limites, et toutes les 30 secondes à partir de ce moment. L'actualisation s'arrête lorsque la souris quitte le <div> .

Si la souris entre à nouveau, le système vérifie la dernière fois que la fonction refresh a été appelée. Si moins de 30 secondes se sont écoulées, elle attend jusqu'à ce que 30 secondes se soient écoulées.

Astuce : clearInterval efface également les événements temporisés générés par setTimeout , tout comme clearTimeout annule setInterval .

Answer 2

Essayez ceci :

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