window.onresize发射两次

Question

我是js的新手.拜托,不要痛苦地踢.我有这个代码

    window.onresize=function() {alert(1);};

当我调整任何浏览器窗口的大小时,此函数会触发两次.为什么？以及如何重写代码将触发一次的代码.

Thanx提前.

Answer 1

您需要超时来捆绑调整大小事件.

var res;
window.onresize=function() {
    if (res){clearTimeout(res)};
    res = setTimeout(function(){console.log("resize triggered");},100);
};

实例

Answer 2

此事件将在不同的浏览器中多次触发(有些在您完成调整大小后,其他浏览器在此期间).

解决此问题的一种方法是在事件触发后等待一定时间(比如说半秒),看是否有进一步的更新.如果没有,您可以继续进行提醒.

例如

var resizeTimer;
window.onresize = function(){
    if (resizeTimer){
        clearTimeout(resizeTimer);
    } 
    resizeTimer = setTimeout(function(){
        alert(1);
        }, 500);
};

看看这个小提琴的工作.