window.onresize与$(window).resize()
来源:互联网 发布:mac下的mysql客户端 编辑:程序博客网 时间:2024/05/21 17:48
window.onresize 是直接给window的onresize属性绑定事件,只能有一个。也就是说后面的会覆盖前面。例如:
window.onresize = function(){ console.log("1")}window.onresize = function(){ console.log("2")}
当浏览器窗口大小发生改变时,控制台只会打印 2。
而jQuery的用法 $(window).resize()可以写多个方法:
$(window).resize(function(){ console.log("3")});$(window).resize(function(){ console.log("4")});
控制台会打印3,4。
浏览器窗口大小改变时,这段代码会执行多次,有时我们可能想要处理比较复杂的逻辑,会对性能影响较大,这样就比较容易造成浏览器假死。
如何实现不管窗口如何改变,只在停止改变之后才执行代码呢?
var resizeTimer = null;$(window).bind('resize', function (){ if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(function(){ console.log("窗口发生改变了哟!"); } , 100);});
通过增加定时器的方式来让代码延迟执行,这样每次窗口改变的时候,我们都清除事件,只有当他停下来之后,才会继续执行。这个方法虽然可以解决resize执行多次的问题,但是感觉还不够完美。比如有些情况,我们需要窗口改变后立即在页面上做一些变化,这种方法并不适用。
如有错误,欢迎指正。谢谢。
阅读全文
0 0
- window.onresize与$(window).resize()
- window.onresize或者$(window).resize()触发两次
- window.onresize
- window.onresize笔记
- window.onresize 事件笔记
- window.onresize使用实例
- IE6中window.onresize事件的处理
- window.onresize 多次触发及其解决办法 - debounce
- window的onresize执行多次的解决方法
- window.onresize 多次触发及其解决办法 - debounce
- window.onresize 多次触发的解决方法
- window.onresize获取窗口的变化
- WPF Child Window Implementation 3. Resize window
- $(window).resize(function(){ window.location.reload() });
- ie6 window.resize 事件无效
- VueJs 监听 window.resize 方法
- VueJs 监听 window.resize 方法
- 浏览器缩放不触发window.onresize事件的BUG
- sqliteopenhelper继承类的oncreate函数调用时间
- Maven项目使用JSON需要的依赖包
- Oracle系统函数
- Netty官方例子(TIME协议)
- 商家最关心的红利,在这!!!
- window.onresize与$(window).resize()
- 关于mybatis报invalid comparison: java.util.Arrays$ArrayList and java.lang.String异常
- Oracle--sys_context
- css中div高度自适应且固定剩余高度由另外div内容填充
- Javaoop4
- 设计模式——装饰器模式
- 使用Python把多个图片拼接成为长图
- android 自动化测试检测弹窗或蒙层
- py细节