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("窗口发生改变了哟!");
} , );
});

通过增加定时器的方式来让代码延迟执行,这样每次窗口改变的时候,我们都清除事件,只有当他停下来之后,才会继续执行。这个方法虽然可以解决resize执行多次的问题,但是感觉还不够完美。

wresize插件:

(function($) {
$.fn.wresize = function(f) {
version = '1.1';
wresize = {
fired : false,
width :
}; function resizeOnce() {
if ($.browser.msie) {
if (!wresize.fired) {
wresize.fired = true;
}else{
var version = parseInt($.browser.version, );
wresize.fired = false;
if (version < ) {
return false;
} else if (version == ) {
// 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()多次执行

    有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个时候,我们需要在窗口拖动的时候去执行代码.但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后 ...

  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. 【python小练】0000

    第 0000 题:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种提示效果. 类似于图中效果 from PIL import Image, ImageDraw, Im ...

  2. 关于AJAX的基础操作

    AJAX开发 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 Java ...

  3. 001_twoSum

    #####solution01##### # def twoSum(nums, target): # res=[] # for i in range(0,len(nums)-1): # p1 = nu ...

  4. python-文件读写操作

    打开文件: f=open('test.txt',mode='r',encoding='utf-8') 参数1  文件名,若非当前路径,需指出具体路径 参数2   mode:   文件打开模式 r    ...

  5. ansible学习笔记二

    Ad-Hoc命令: 所谓Ad-Hoc,简而言之是"临时命令",英文中作为形容词有"特别的,临时"的含义.Ad-Hoc只是官方对Ansible命令的一种称谓. 从 ...

  6. Javascript入门(一)弹出方框

    今天要javascript做一个用网页弹出框框的效果,虽然没什么卵用. 效果如图,弹出一个“hello world”的框框. 1. 新建一个html 页面, 如图: <!DOCTYPE html ...

  7. 网易云课堂《JS原创视频教程-知识点类》

    http://caniuse.com/#index     //Can I use... Support tables for HTML5, CSS3, etc-支持h5和css3的情况列表 JS包含 ...

  8. MatrixBG 代码瀑布的实现

    黑客帝国中代码瀑布是怎么实现的呢? 我们可以通过 window.innerWidth获取屏幕的宽度W,并规定字符的大小size,那么屏幕中共有 W/size 列字符出现, 我们不断的去更改每一列中文字 ...

  9. 709. To Lower Case

    Algorithm to-lower-case https://leetcode.com/problems/to-lower-case/ 1)problem Implement function To ...

  10. rocketmq的name server启动时的jvm参数配置

    -Xms2g -Xmx2g -Xmn1g //设置年轻代大小 -XX:MetaspaceSize=128m //持久代的初始大小 -XX:MaxMetaspaceSize=320m //持久代的上限 ...