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

浏览器窗口发生改变

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