2

divがajaxで更新されるようにしようとしています。コード自体は実装済みで、すでに機能しています。div を 30 秒ごとに更新しますが、アクティブなタブでのみ更新します。私が理解していることから、タブが使用されているかどうかに関係なく、 setInterval は毎回更新されます。非アクティブな場合にsetIntervalが起動されないように、mouseenter（またはユーザーがサイトでアクティブであることを意味する他の種類のユーザー操作）をsetIntervalと組み合わせたいと思います。

現在、最初のページの読み込みでうまく機能するこのコードがあります。最初の 30 秒間は更新されず、div で mouseenter されるまで更新されません。ただし、最初の 30 秒後は、マウスを入力するたびに更新されます。

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

});
4

3 に答える 3

4

マウスカーソルが目的のタブにあるときに間隔を設定し、外側にあるときにそれをクリアするだけです:

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

これで<div>、マウスが境界内に入った瞬間に、その瞬間から 30 秒ごとに更新されます。これは、マウスが から離れると停止し<div>ます。

マウスが再び入ると、refresh関数が最後に呼び出された時刻がチェックされます。経過時間が 30 秒未満の場合は、30 秒経過するまで待機します。

プロのヒント:clearIntervalによって生成された時限イベントも、キャンセルsetTimeoutと同様にクリアします。clearTimeoutsetInterval

于 2012-08-26T15:50:19.607 に答える
0 
$(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);    
        }
    });
});

</p>

于 2012-08-26T15:56:14.180 に答える
0

これを試して：

$(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);
 });
于 2012-08-26T15:53:06.033 に答える