js实现之--防抖节流【理解+代码】

防抖：

    理解：在车站上车，人员上满了车才发走重点是人员上满触发一次。

    场景：实时搜索，拖拽。

    实现：

        //每一次都要清空定时器，重新设置上计时器值，使得计时器每一次都重新开始，直到最后满足条件并且等待delay时间后，才开始执行handler函数。

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}
// 不难看出如果用户调用该函数的间隔小于wait的情况下，上一次的时间还未到就被清除了，并不会执行函数

 

节流：

    理解：大于等于10分钟发一次车，重点是一定间隔时间就会触发一次。

            （即预定一个函数只有在大于等于执行周期时才会执行，周期内不执行）。

    场景：窗口调整（调整大小），页面滚动（滚动），抢购时疯狂点击（鼠标按下）

    实现：

        //处理程序是要传入的进行节流的函数，wait是上述的间隔时间。

        //使用时间戳进行时间的计算。

function throttle（handler，wait）{ //handler是要进行节流的函数，wait是等待时间
　　　var lastTime = 0;
　　　　return function（）{
　　　　　　　　var nowTime = new Date（).getTime（）;    //获取当前时间
　　　　　　　　if（nowTime - lastTime> wait）{
　　　　　　　　　　　　handler.apply（this，arguments）;
　　　　　　　　　　　　lastTime = nowTime;      //更新最后时间
　　　　　　　　}
　　　　　}
}