防抖&节流函数

防抖函数

理解为电梯开门，有人进入重置一次关门时间，直到最后没人进入时，才执行关门
即: 在一段时间内只执行最后一次动作，重置清除之前执行的动作

/*
* func:需要执行防抖的函数
* delay: 时间间隔
*/

function debounce(func, delay) {
  let timer
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
        func.apply(this, args)
    }, delay);
  }
}

节流函数

理解为蓝鲸呼吸，每间隔半小时浮出水面呼吸一次
即：在一定时间段内执行一次，忽略中间执行的动作

/*
* func:需要执行防抖的函数
* delay: 时间间隔
*/

// 时间戳方式
function thorttle(func, delay = 500) {
  preTime = Date.now()
  return function (...args) {
    nowTime = Date.now()
    if (nowTime - preTime >= delay) {
      func.apply(this, args)
      preTime = Date.now()
    }
  }
}
// 定时器方式
function thorttle2(func, delay = 500) {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null
      }, delay);
    }
  }
}

小结：

要通过返回函数形成闭包，通过作用域链，实现返回的每个函数都可以保持timer时间标记变量的同一引用
通过使用apply函数，使this保持对调用对象的正确指向