前端高频面试题防抖节流

防抖节流是什么

本质上是优化高频率执行代码的一种手段

如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce） 和 节流（throttle） 的方式来减少调用频率

防抖

定义：
防抖主要是在规定时间内只触发一次，如果再次调用，时间重新计算
实现：

let timeout = null; 
function debounce(fn, delay, args) {
  if (timeout) clearTimeout(timeout); 
  timeout = setTimeout(() => {
    fn(args); 
  }, delay);
}

节流

定义：
节流是在间隔时间内只触发一次，比如间隔1s触发一次
实现：

let flag = null;
function throttle(fn, time, args) {
  if (flag) return;
  flag = setTimeout(() => {
    fn(args);
    flag = null;
  }, time);
}