首页 > 代码库 > 解决Javascript中$(window).resize()多次执行

解决Javascript中$(window).resize()多次执行

有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配。这个时候,我们需要在窗口拖动的时候去执行代码。但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后,在执行代码,否则极容易造成浏览器假死状态,这个时候该如何解决呢。

浏览器窗口发生改变

先来写一下窗口拖动时执行代码的函数,原生JS可用window.onresize Jquery可用$(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);

 

解决Javascript中$(window).resize()多次执行