函数节流和函数防抖

函数节流和函数防抖

• 防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

    /**
     * @desc 函数防抖
     * @param func 函数
     * @param wait 延迟执行毫秒数
     * @param immediate true 表立即执行，false 表非立即执行
     */
     function debounce(fn, wait, immediate=true) {
      let timer;
      return function () {
        console.log("timer:"+timer)
          const context = this;
          const hasImmeAndFirst = !timer&&immediate

          if (timer) clearTimeout(timer);
          
          if (hasImmeAndFirst) {
              fn.apply(context, arguments)
          }else{
            timer = setTimeout(() => {
                  fn.apply(context, arguments)
          }, wait)
          }
      }
  }

• 节流：是指在高频事件触发期间，n秒内函数只会执行一次

/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
let previous=0 //全局变量
function throttle(func, wait ,type) {
     if(type===2){
          let timeout;
      }
      return function() {
          let context = this;
          let args = arguments;
          if(type===1){
              let now = Date.now();
              console.log(previous)
  
              if (now - previous > wait) {
                  func.apply(context, args);
                  previous = now;
              }
          }else if(type===2){
              if (!timeout) {
                  timeout = setTimeout(() => {
                      timeout = null;
                      func.apply(context, args)
                  }, wait)
              }
          }
      }

参考：https://www.jianshu.com/p/c8b86b09daf0