無効に自動更新ユーザーは、私がこのように5秒ごとに更新されている私のページでDIVの#alerts_wrapper持って

Question

（jQueryの）スクロールしている場合：私はMAX-を持って

refresh_alerts = setInterval(function() { 
    $('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container'); 
}, 5000); 

をdivの高さを200ピクセルに設定し、スクロールしてautoに設定します。このdivをスクロールする場合、ユーザーがリフレッシュするのを防ぐにはどうすればいいですか？そして、ユーザーがスクロールを止めたら、再びリフレッシュを始めますか？

ありがとうございます！

Answer 1

編集：は新しいコードで更新し、ポーリングのための必要性だけでセット/リセットしませんスクロールするとフラグが立てられます。

DEMO

var isScrolling = false; 
$(function() { 

    $('#scrollingDiv').on('scroll', function() { 
     isScrolling = true; 
    }); 

    refreshTimer = setInterval(refreshContent, 5000); 

    function refreshContent() { 
     if (!isScrolling) { 
      $('#scrollingDiv').prepend('Latest Content <br />');//test code 
      //$('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container');    
     } 
     isScrolling = false; 
    } 

}); 

----------旧ポスト---------- divのスクロールイベントに

単純なポーリングは、トリックを行います。 DEMO

var isScrolling = false; 
var refreshTimer = null; 
$(function() { 

    $('#scrollingDiv').on('scroll', function() { 
     isScrolling = true; 
     if (refreshTimer != null) { 
      clearInterval(refreshTimer); 
      refreshTimer = null; 
     } 
    }); 

    //polling to see if still scrolling 
    var pollScrolling = setInterval(function() { 
     isScrolling = false; 

     if (refreshTimer == null) { 
      refreshTimer = setInterval(refreshContent, 5000); 
     }  
    }, 500); 

    //initialize timer 
    refreshTimer = setInterval(refreshContent, 5000); 

    function refreshContent() { 
     if (!isScrolling) { 
      $('#scrollingDiv').prepend('Latest Content <br />'); 
      //$('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container');    
     } 
    } 

}); 

Answer 2

使用このjQueryプラグイン：に知っているブールフラグと一緒に

$('#yourdiv').bind('scrollstart', function(){ 
    //user is scrolling 
}); 
$('#yourdiv').bind('scrollstop', function(){ 
    //user has finished scrolling 
}); 

使用この：scroll-startstop.events.jquery

を述べた上でプラグインを使用して、あなたは今、このようなイベントをスクロールへのアクセスを、持っていますdivを更新します。

あなたの最終的なコードは次のようになります。http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

は、その後、あなたがグローバルを作成することができます

var isScrolling = false; 

$('#yourdiv').bind('scrollstart', function(){ 
    isScrolling = true; 
}); 
$('#yourdiv').bind('scrollstop', function(){ 
    isScrolling = false; 
}); 

refresh_alerts = setInterval(function() { 
    if (!isScrolling){ 
     $('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container'); 
    } 
}, 5000); 

Answer 3

これを行うには、私はここで概説としては、カスタムスクロールイベントを実装する必要があると思います変数（またはより良い、インターバルコードのクロージャで）、それをvar isScrolling = falseと呼ぶことにしましょう。 scrollstartとscrollstopのハンドラを作成します。

jQuery(div).on('scrollstart', function() { 
    isScrolling = true; 
}); 
jQuery(div).on('scrollstop', function() { 
    isScrolling = false; 
}); 

最後に、スクロールフラグのためにあなたの間隔でチェック：

refresh_alerts = setInterval(function() { 
    if(!isScrolling) { 
     $('#leftside div#alerts_wrapper').load('staffhome.php #alerts_container'); 
    } 
}, 5000);