禁用自動刷新，如果用戶正在滾動（JQuery的）

Question

我有我的頁面上的DIV #alerts_wrapper正被每5秒刷新一次這樣的：

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

我有一個MAX- div的高度設置爲200px，並滾動到自動。如果用戶在這個div上滾動，如何停止刷新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插件：scroll-startstop.events.jquery

使用上述插件，你現在可以使用滾動事件，就像這樣：

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

使用此與布爾標誌一起知道什麼時候刷新div。

您的最終代碼應該是這個樣子：

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

要做到這一點，我認爲你需要爲這裏列出來實現自定義滾動事件：http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

然後你就可以創建一個全局變量（甚至更好，在間隔代碼的閉包中），我們稱之爲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);