【前端】每日回顾知识点——防抖与节流

1.防抖与节流

(1)防抖：在连续快速的触发下，只会执行一次。前面的所有触发都被取消，最后一次执行·在规定的时间之后才会触发。作用：缓存高并发请求。
例如： 在向文本框输入文字会自动搜索，前面所有输入的文字都在触发搜索事件，输入最后一个字后等待一定的时间才真正被触发。

(2)节流： 在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。 作用：浏览器有充裕的时间解析代码。
例如： 点击发送验证码，频繁点击只会在规定时间5s内触发一次，给你返回一个验证码。

实现方式

两者的底层实现原理都是：闭包和延时器.
防抖技术就是一个定时器，判断多少毫秒内是否存在这个定时器，存在就清除，不存在就调用

//1.  直接使用插件lodash
<script>src="./js/lodash.js"</script>
//function()为需要防抖或者节流的函数
_debounce(function() ,5000) // 防抖
_throttle(function(),5000) // 节流

//2.手撕
// 防抖
function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}
//节流
function throttle(fn, delay) {
  let timer = null;
  return function() {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      timer = null;
    }, delay);
  };
}