js节流与防抖函数封装

节流与防抖函数封装和使用

常见应用场景：

• window的 resize 和 scroll 事件；
• 文字输入时的 keyup 事件；
• 元素拖拽、移动时的 mousemove 事件；

防抖: 将多次执行变为最后一次执行

• 定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行
• 原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。

    /**
    *防抖函数
    *@param fn 事件触发的操作
    *@param delay 多少毫秒内连续触发事件，不会执行
    *@returns {Function}
    */
    function debounce(fn, delay){
        let timer = null; //借助闭包
        return function(){
          let context = this,
              args = arguments;
          timer && clearTimeout(timer);
          timer = setTimeout(function(){
            fn.apply(context, args);
          },delay);
        } 
    }
    //使用
    function showTop() {
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;　　
      console.log('滚动条位置：' + scrollTop);
    }
    window.onscroll = debounce(showTop,200);

函数节流: 将多次执行变为每隔一段时间执行

• 定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
• 原理：对处理函数进行延时操作，通过设定时间片，控制事件函数间断性的触发。

    /**
    * 节流函数
    * @param fn 事件触发的操作
    * @param delay 间隔多少毫秒需要触发一次事件
    */
    //基本原理
    function throttle(fn, delay) {
      let valid = true;
      return function() {
        let context = this;
        let args = arguments;
        if (!valid) {
          return;
        }
        valid = false;
        setTimeout(() => {
          fn.apply(context, args);
          valid = true;
        }, delay);
      }
    }

    //时间戳
    function throttle1(fn, delay) {
      let prev = new Date();
      return function() {　
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - prev >= delay) {
          fn.apply(context, args);
          prev = new Date();
        }
      }
    }

    //定时器
    function throttle2(fn, delay) {
      let timer = null;
      return function() {
        let context = this;
        let args = arguments;
        if (!timer) {
          timer = setTimeout(function() {
            fn.apply(context, args);
            clearTimeout(timer);
          }, delay)
        }
      }
    }

    //使用
    function showTop() {
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;　　
      console.log('滚动条位置：' + scrollTop);
    }
    window.onscroll = throttle(showTop,200);