[js]window.onresize与$(window).resize()[zt]
clq
浏览(294) -
2020-01-20 21:09:11 发表
编辑
关键字: javascript
window.onresize与$(window).resize()
原创 淡定如斯 最后发布于2017-11-29 17:25:51 阅读数 22654 收藏
展开
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执行多次的问题，但是感觉还不够完美。比如有些情况，我们需要窗口改变后立即在页面上做一些变化，这种方法并不适用。
如有错误，欢迎指正。谢谢。
NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.
