防抖、节流

防抖：连续重复发生的动作

• 提交最后一次

// 定义防抖函数
function debounce(fn, delay = 500) {
    var timer = null
    return function() {
        clearTimeout(timer)
        let args = arguments
        let context = this
        timer = setTimeout(() => {
            fn.apply(context , args )
        }, delay )
    }
}

// 真正需要执行的方法
syHai() {
  console.log(‘我被触发了’)
}

// 重点- 接收debounce实例
var debounceFn = debounce(syHai)

btnClick() {
  debounceFn ()
}

• 提交第一次

function debounce(fn, delay = 500, immediate = false) {
  var timer = null
  return function () {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    if (immediate) {
      //连续动作只初次生效
      //如果启动了定时器 表示已经执行过，不再执行
      !timer && fn.apply(context, args);

      //启动定时器标识 delay时间后的动作才能执行下一次
      timer = setTimeout(function() {
        timer = null;
      }, delay);
    } else {
      //连续动作只末次生效
      timer = setTimeout(function() {
        fn.apply(context, args);
      }, delay);
    }  
  }
}

节流： 一定时间内执行一次

// 定义节流函数
var throttleSaHai = function(fn, dealy = 1000) {
    let timer1 = true
    return function() {
        if(!timer1) {
            return false
        }
        timer1 = false
        setTimeout(function() {
            fn()
            timer1 = true
        }, dealy)
    }
}

syHai() {
  console.log(‘我被触发了’)
}

window.addEventListener('resize', throttleSaHai(syHai, 2000))