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

浏览器窗口发生改变

先来写一下窗口拖动时执行代码的函数,原生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()多次执行的更多相关文章

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

    https://www.cnblogs.com/shuilangyizu/p/6816756.html 有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个 ...

  2. 如何处理 jQuery $(window).resize() 中的方法被多次执行的小问题

    引言: 估计很多同志们在编写浏览器resize()的方法时,都会遇到这样的情况: 当拖动浏览器的边角时,页面中的一些效果随浏览器大小的改变而触发,这一过程开始到结束,resize() 中的方法被执行了 ...

  3. 解决Js中的resize事件执行两次的方法

    问题: 页面自适应的时候需要用到js的resize事件,但在执行过程中发现只要触发resize事件就会执行2次 原生js: window.onresize = function(){ console. ...

  4. javascript中怎么让一个页面执行多个window.onload?

    我们都知道在javascript中window.onload 只能有一个如果有多个的话后面的会覆盖前面的,今天我们来看看怎么让一个页面执行多个window.onload <script type ...

  5. 详解JavaScript中的this

    JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不 ...

  6. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  7. (转)javascript中的this

    JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者…有人甚至因为坑大而不 ...

  8. JQuery 在$(window).load() 事件中 不运行 $(window).resize()

    本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题   :J ...

  9. 全面理解JavaScript中的 this

    全面理解JavaScript中的 this 上下文 VS 作用域 作用域(scope) 是在运行时代码中的某些特定部分中变量,函数和对象的可访问性.换句话 说,作用域决定了代码区块中变量和其他资源的可 ...

随机推荐

  1. 洛谷 P3956 棋盘(BFS)

    传送门:Problem P3956 https://www.cnblogs.com/violet-acmer/p/9827010.html 题解: BFS 相关变量解释: color[maxn][ma ...

  2. poj 3678(SCC+2-SAT)

    传送门:Problem 3678 https://www.cnblogs.com/violet-acmer/p/9769406.html 难点: 题意理解+构图 题意: 有n个点 v[0,2..... ...

  3. jackson用法

    ObjectMapper mapper=new ObjectMapper(); //3.调用mapper的writeValueAsString()方法把一个对象或集合转为json字符串 Custome ...

  4. zabbix3.x添加H3C网络设备详解

    zabbix3.x添加H3C网络设备详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 前言: 欢迎加入:高级运维工程师之路 598432640 相信大家在看我的文章之前,也看过其 ...

  5. JAVA Socket 编程---Socket 和 ServerSocket

    一,Socket Socket的选项 1) TCP_NODELAY:默认值为false.表示采用Negale算法.当设置为true时,表示关闭Socket缓冲,立即发送数据. Socket默认发送数据 ...

  6. DotNetBar 控件设置空内容时显示内容

    可以通过修改所有关于Watermark时的设置.

  7. luogu P2123 皇后游戏

    传送门 跟国王游戏一样的分析 考虑相邻的两个大臣,设他们前面的\(\sum a_j\)为\(s\),同时注意到后面人的贡献更大 所以\(i\)在前面时,\(c_j=\max(\max(c_{last} ...

  8. 2、Saltstack的数据系统

      一.Grains grains是salt用来收集minion端底层系统信息的接口.比如,操作系统type.域名 .IP地址.内存及其他相关系统属性信息等.存储在minion端,用于保存minion ...

  9. 关于《汇编语言(王爽)》程序6.3使用16个dw 0的问题

    在学习王爽老师<汇编语言>的第6.2节时,在程序6.3代码中,给出了如下的代码: assume cs:code code segment dw 0123h, 0456h, 0789h, 0 ...

  10. Android UI组件之自定义控件实现IP地址控件

    http://www.cnblogs.com/razerlack/p/4273282.html