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

Posted 2020-09-16 水狼一族

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

浏览器窗口发生改变

先来写一下窗口拖动时执行代码的函数，原生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);