window.onresize与$(window).resize()

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执行多次的问题,但是感觉还不够完美。比如有些情况,我们需要窗口改变后立即在页面上做一些变化,这种方法并不适用。
如有错误,欢迎指正。谢谢。

  • 11
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值