window.onresize 触发多次

Question

window.onresize 触发多次

我的浏览器高度高了5像素，onresize 执行5次。页面抖动厉害，有没有办法，同一时间高度扩展5像素，只执行一次onresize

window.onresize = () => {

}

Answer 1

这是节流问题，可以参考https://segmentfault.com/a/11... 详细了解一下

Answer 2

借助 函数防抖，可以引入 lodash

import _ from 'lodash'
window.onresize = _.debounce(function() {
    
}, 500)

意思就是，在页面窗口停止变化的500毫秒后，再执行回调函数。

Answer 3

节流了解一下
规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
链接描述

Answer 4

用于页面滚动的 你改下试试

    //页面滚动 侧导航对应项高亮
    var timeout;
    var dom_arr = $(".item_box");
    $(window).scroll(function(){
        if (timeout){
            clearTimeout(timeout);
        }   
        timeout = setTimeout(function(){   
            nav_add_on(dom_arr)  
        },200);   
    })