节流和防抖

发表于 | 更新于: | 分类于 |

节流与防抖动是常见的优化点:
防抖就是防止抖动，避免事件的重复触发
节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率

防抖和节流都是为了阻止操作高频触发，从而浪费性能。

1
2
3
4
5
6
7
8
9
function debounce(func, wait=500){
    let timeout;
    return function(event){
      clearTimeout(timeout)
      timeout = setTimeout(()=>{
        func.call(this, event)
      },wait)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function throttle(fn, delay=1000) {
    let flag = true;
    return function () {
        if (!flag) { return; }
        flag = false;
        setTimeout(() => {
            fn.apply(this, arguments);
            flag = true;
        }, delay);
    }
}
function fn(value){
  console.log(value);
}
var throttleFunc = throttle(fn,2000);
window.addEventListener("resize",function(){    
    throttleFunc(Math.random());// 给节流函数传参
})