解决Javascript中$(window).resize()多次执行(转)
Posted zhaobao1830
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决Javascript中$(window).resize()多次执行(转)相关的知识,希望对你有一定的参考价值。
https://www.cnblogs.com/shuilangyizu/p/6816756.html
有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配。这个时候,我们需要在窗口拖动的时候去执行代码。但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后,在执行代码,否则极容易造成浏览器假死状态,这个时候该如何解决呢。
浏览器窗口发生改变
先来写一下窗口拖动时执行代码的函数,原生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()多次执行(转)的主要内容,如果未能解决你的问题,请参考以下文章
解决Javascript中$(window).resize()多次执行
将单行 JavaScript 注释 (//) 与 re 匹配
如何使用 re() 从使用 scrapy 的 javascript 变量中提取数据?
解决Javascript中$(window).resize()多次执行(转)