jQuery resize() 和 scroll() 的優化

一、resize()

在最近的一個jQuery插件中，我使用到了jQuery中的resize()方法來檢測用戶調整瀏覽器窗口並運行相關代碼。能夠注意到resize window時各個瀏覽器的性能消耗不一。

    #IE、Safari、Chrome在調整窗口變化中一直在執行resize事件

    #Opera則在這個過程當中發生了不少次resize事件，但在結束調整時執行。

    #Firefox則是隻在調整結束後才執行事件。

 咱們想要的明顯是在結束調整以後才執行事件。幸運的是咱們能夠經過如下幾種方法來調整:

調整運行時間

1. 建立一個在你發生調整時須要執行的任意代碼的函數。
2. 使用resize()方法，你能夠運行函數並給它設置一個超過期間執行，從而達到在某一段時間內執行一次函數

(function($) {
    var resizeTimer; 
    function resizeFunction() {
        // 處理函數
    };
    
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(resizeFunction, 250);//咱們能夠適當調整時間間隔
    });
    resizeFunction();//首次運行
})(jQuery);

 

二、scroll()

一樣的，咱們對滾動監聽也能夠作一樣的處理

(function($) {
    var scrollTimer; 
    function scrollFunction() {
        // 處理函數
    };
    
    $(window).scroll(function() {
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(scrollFunction, 250);//咱們能夠適當調整時間間隔
    });
})(jQuery);