因为markdown的排版原因，强烈建议移步 这里 观看

前言

你的每一份经历，不管是顺境还是坎坷，都会增加你生命的厚度。所有的苦，以后都会笑着说出来。加油，朋友！

话不多说，先来看一张图

对于普通滚动来说，如果不加以优化，页面可能会出现“卡顿”现象。为了保证页面性能。
需要做 $\color{orange} {防抖}$ 或 $\color{orange} {节流}$ 处理

使用场景

• 淘宝购物时，如果你连续点击支付按钮，你会发现它只响应一次
• google或者bing搜索时，连续输入或者删除文字时，不会立即请求服务器，下面的联想搜索功能不会立即发生改变
• 鼠标连续滚动事件
• 按钮点击事件等

防抖

作用：高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定事件内再次触发，那么重新计算时间

类似于LOL中的$\color{red} {回城}$技能,如果$\color{red} {回城}$会打断，再次$\color{red} {回城}$就要等8秒（不考虑先锋和男爵Buff）

实现代码

// 为需要防抖的事件封装一个防抖函数
function debounce(fn,time) {
 // 存放定时器的返回值，用来清除定时器
  let timer = null
  return (...args)=>{
    // 触发了需要防抖的事件，把前一个定时器清除掉
    clearTimeout(timer)
    timer = setTimeout(()=>{
      fn(...args)
    },time)
  }
}

原理图

节流

作用：对于高频率的触发事件，在指定的时间内，只响应第一次

类似于LOL里的英雄平a，不管你手速多么快，一定都是在指定时间内只攻击一次。当买了加攻速的装备后，实际上这时候“指定的时间”会变很短，这时候就是考验你的手速了，嘿嘿~

实现代码

functio throttle(fn,time) {
  // 保存一个节流阀
  let temp = false
  return () => {
    if(temp) return
    else {
      temp = true
      setTimeout(()=>{
        // 执行外部传入的函数
        fn.apply(this,arguments)
        temp = false
      },time)
    }
  }
}

原理图

不过实际写项目我都会使用别人封装好的防抖节流函数（绝对不是因为我懒2333）

这里我推荐lodash库 点击去lodash官网