记录--20道前端手写面试题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. 防抖节流

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

1. 防抖节流

 // 防抖
    function debounce(fn) {
      let timeout = null; 
      return function () {
        // 如果事件再次触发就清除定时器，重新计时
        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);
      };
    }

这也是一个经典题目了，首先要知道什么是防抖，什么是节流。

• 防抖： 在一段时间内，事件只会最后触发一次。

• 节流： 事件，按照一段时间的间隔来进行触发。

  实在不懂的话，可以去这个大佬的Demo地址玩玩防抖节流DEMO

 // 防抖
    function debounce(fn) {
      let timeout = null; 
      return function () {
        // 如果事件再次触发就清除定时器，重新计时
        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);
      };
    }