Próbuję zrobić to tak, że div odświeża się z AJAX. Sam kod jest realizowany i już pracuje. Chcę, aby div odświeżył co 30 sekund, ale tylko na aktywnej karcie. Z tego, co rozumiem SetInterval odświeży za każdym razem, niezależnie od tego, czy karta jest w użyciu, czy nie. Chciałbym połączyć mózgową (lub inny rodzaj interakcji użytkownika, który oznacza, że użytkownik jest aktywny na miejscu) z setinterval, aby setinterval nie zostanie zwolniony, jeśli nieaktywny.

Obecnie mam ten kod, który działa dobrze na początkowym obciążeniu strony. Nie ma odświeżania w ciągu pierwszych 30 sekund, ani nie jest odświeżanie, aż Mobiweer na Div. Jednak po początkowym 30 sekundach odświeża na każdym myszy.

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

});
2
cwal 26 sierpień 2012, 19:37

2 odpowiedzi

Najlepsza odpowiedź

Wystarczy ustaw interwał, gdy kursor myszy znajduje się w żądanej karcie i oczyść ją, gdy jest na zewnątrz:

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

Teraz <div> jest odświeżony w chwili mysz wchodzi wewnątrz jego granic, a co 30 sekund od tego momentu. To zatrzymuje się, gdy mysz pozostawia <div>.

Jeśli mysz wchodzi ponownie, sprawdza, kiedy ostatnio wywołano funkcję refresh. Jeśli minęło mniej niż 30 sekund, czeka do 30 sekund przejść.

pro-końcówka : clearInterval Wyczyść również zdarzenia czasowe wygenerowane przez {x1}}, podobnie jak clearTimeout ankiety setInterval.

4
MaxArt 26 sierpień 2012, 16:48

Spróbuj tego:

$(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);
 });
0
Mohit Pandey 26 sierpień 2012, 15:53