防抖、节流封装与实际应用

防抖、节流封装与实际应用

1. 防抖

   /**
        * @description: 一个防抖函数
        * @param {function} fn 执行的业务代码
        * @param {number} delay 延迟时间,默认1s
        * @return {function}
        */
       function debounce(fn, delay = 1000) {
         let timer = null;
         return function () {
           // 保留调用时的 arguments，传递给后面可能会使用到
           const args = arguments;
           if (timer !== null) {
             clearTimeout(timer);
           }
           timer = setTimeout(() => {
             // 此处是箭头函数，this指向上层函数作用域，即谁调用的16行返回的函数
             // 但是如果直接调用fn，那么fn函数里的this是指向window的。 故这里使用apply调用 改变一下this指向
             fn.apply(this, args);
           }, delay);
         };
       }   
      ```
   

2. 节流

   /**
    * @description: 一个节流函数
    * @param {function} fn 执行的业务代码
    * @param {number} delay 延迟时间,默认1s
    * @return {function}
    */
   function throttle(fn, delay = 1000) {
     let timer = null;
     return function () {
       const args = arguments;
       if (timer !== null) {
         return;
       }
       timer = setTimeout(() => {
         timer = null;
         fn.apply(this, args);
       }, delay);
     };
   }
   

3. 实际应用完整代码