有些時候,我們需要在瀏覽器窗口發生變化的時候,動態的執行一些操作,比如做自適應頁面時的適配。這個時候,我們需要在窗口拖動的時候去執行代碼。但是有些時候,執行的操作比較復雜,我們只希望在窗口拖動完畢之后,在執行代碼,否則極容易造成瀏覽器假死狀態,這個時候該如何解決呢。

瀏覽器窗口發生改變

先來寫一下窗口拖動時執行代碼的函數,原生JS可用window.onresizeJquery可用$(window).resize()。

window.onresize = function(){
    console.log("窗口發生改變了喲!");
}

$(window).resize(function(){
    console.log("窗口發生改變了喲!");
})

這段代碼在窗口拖動時會執行多次,如果執行的代碼較復雜,極容易造成瀏覽器假死,對頁面性能影響較大。

解決resize執行多次

如何實現不管窗口如何改變,只在停止改變之后才執行代碼呢?我們來對之前的代碼做下修改:

var resizeTimer = null;
$(window).bind('resize', function (){
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function(){
                console.log("窗口發生改變了喲!");
        } , 500);
});

通過增加定時器的方式來讓代碼延遲執行,這樣每次窗口改變的時候,我們都清除事件,只有當他停下來之后,才會繼續執行。這個方法雖然可以解決resize執行多次的問題,但是感覺還不夠完美。

wresize插件

(function($) {
    $.fn.wresize = function(f) {
        version = '1.1';
        wresize = {
            fired : false,
            width : 0
        };

    function resizeOnce() {
        if ($.browser.msie) {
            if (!wresize.fired) {
                wresize.fired = true;
            }else{
                var version = parseInt($.browser.version, 10);
                wresize.fired = false;
                if (version < 7) {
                    return false;
                } else if (version == 7) {
                    // a vertical resize is fired once, an horizontal resize
                    // twice
                    var width = $(window).width();
                    if (width != wresize.width) {
                            wresize.width = width;
                            return false;
                    }
                }
            }
        }
        return true;
    }

    function handleWResize(e) {
        if (resizeOnce()) {
            return f.apply(this, [ e ]);
        }
    }

    this.each(function() {
        if (this == window) {
            $(this).resize(handleWResize);
        } else {
            $(this).resize(f);
        }
    });
    return this;
    };
})(jQuery);

這是在網上找到一個jquery插件源碼,你可以把他另存為jquery.wresize.js,然后在你的頁面引用,并執行以下操作。

function sayHello() {
    console.log("窗口發生改變了喲!");
}
$(window).wresize(sayHello);

通過以上方法,我們的問題就解決啦,如果覺得本文幫到了你,記得點贊喲~