花不到5分钟复习下js防抖和节流吧

一、防抖

防抖，顾名思义就是防止抖动，什么叫抖动呢

假设你的页面有个刷新的按钮，每次点击会向后台发送请求...

现有一暴躁用户，发挥了自己单身二十年的手速疯狂点击刷新按钮，http请求一个接一个的发，你就说这个场面抖动不抖动？

那怎么防抖呢，核心思想是：

一定时间内，每次点击都重新开始计时，什么时候倒计时能走完（这段时间内没有重复点击）就什么时候发出请求。

解决过程：

当用户第一次触发事件的时候，开始一个定时器（setTimeout），延迟1s执行，此后每次重复点击都清掉上一次的定时器，并开始重新计时

这样就实现了目标：指定时间内没有再次点击，这个请求才可以发出去

实现：

//func：需要防抖的函数
//wait：等待时间，默认1s
function debounce (func, wait = 1000) {
  // 用闭包缓存定时器id
  let timer = 0;
  
  return function(...args) {
    //重复点击就清掉
    if (timer) {
        clearTimeout(timer)
    }
    
    //每次都重新开始计时，延迟执行
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

常见的使用场景有点击按钮发送请求、获取浏览器滚动停止的位置、获取搜索框或者文本编辑的自动提示等

二、节流

节流和防抖的不同之处在于，防抖的时候如果一直触发事件，这个请求就永远也发不出去了

而节流会隔一段时间发出去一次请求，所以叫节流

从实现来看，节流记录的是上一次执行函数的时间，然后用当前时间减去上一次执行时间，结果大于等待时间的，就执行一次，否则什么都不干

实现：

//func：需要节流的函数
//wait：等待时间
function throttle (func, wait = 1000) {
    //闭包记录上一次执行时间
    let lastTime = 0;
    
    //返回一个带有防抖功能的函数
    return function(...args) {
        let now = new Date();
        
        if (now - lastTime > wait) {
            //更新执行时间
            lastTime = now;
            func.apply(this, args);
        }
    }
}

防抖和节流其实是差不多的，区别基本上都在名字里了，仔细体会一下。

以及，我大声朗读了一遍，确实不到5分钟...