【前端学习——防抖和节流+案例】

定义

【前端八股文】节流和防抖

防抖

连续触发事件但是在设定的一段时间内只执行最后一次
在这里插入图片描述

代码实现思路【定时器】

大概意思就是：
每次按起键盘后，都将之前的定时器删除，重新开始计时。
在这里插入图片描述

节流

连续触发事件，只执行一次
在这里插入图片描述

代码实现思路【定时器】

意思：
每次触发事件，如果定时器还没结束，我就不执行触发的事件。不会打断当前在执行的任务。
在这里插入图片描述

代码

参考https://juejin.cn/post/7079681931662589960#heading-22

     // 防抖
    function debounce(fn) {
      let timeout = null; 
      return function () {
        // 如果事件再次触发就清除定时器（此时定时器不为null），重新计时
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          fn.apply(this, arguments);
        }, 500);
      };
    }

 // 节流
    function throttle(fn) {
      let flag = null; // 通过闭包保存一个标记
      return function () {
        if (flag) return; // 当定时器没有执行的时候标记永远是null
        flag = setTimeout(() => {
          fn.apply(this, arguments);
           // 最后在setTimeout执行完毕后再把标记设置为null(关键)
           // 表示可以执行下一次循环了。
          flag = null;
        }, 500);
      };
    }