解决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);