防抖和节流

1.什么是防抖和节流？

• 防抖：从字面意思理解就是防止抖动，众所周知，在抖动的情况下容易发生高频触发。为了避免这种情况，防抖的核心就是<延迟执行>，当间隔时间大于规定时间，才会触发执行方法。适用场景：实时搜索、拖拽。
• 节流：字面翻译–>节省流量。节流是指若在规定的间隔时间内仍频繁重复操作，请求方法并不会重新发送，直到中间间隔时间大于规定的间隔时间，才会重新触发请求。适用场景：抢购疯狂点击。

2.防抖和节流的共同点和区别？

• 共同点：

1. 防抖和节流均是为了防止频繁触发、消耗过多资源而提出的解决方法。
2. 防抖和节流的核心思想，均是设定一个规定的空隙时间，只有等待时间超过空隙时间才会请求数据。
3. 防抖和节流的实现均要利用闭包，保护局部变量。

• 区别：

1. 防抖是延迟执行，等待时间超过规定时间才会执行。
2. 节流是立即执行，中间等待时间超过规定时间才会再次执行。

3.实例

处理防抖和节流的方式多种多样，以下两种方法只是为了便于理解

1.防抖

思路：第一次点击后会立即执行一次请求，然后疯狂连续点击按钮，每次点击都会促使定时器重新计时，只有停止点击等待定时器执行完毕后才能触发下一次请求，相对于初始化一次函数

// html
<button id="btn">click me</button>

// js
// 假定这是一个请求数据的方法
function req(){
 console.log('发送请求~')
}
// 点击事件要执行的函数
function fn(){
  let timeout;
  return function(){
    if(timeout){
       clearTimeout(timeout)
     } else {
       req() // 调用数据请求
     }
     timeout = setTimeout(function(){
       timeout = null
     },2000)
  }
}
// 你要愿意上面代码简写成如下也行
// function fn(){
//   let timeout;
//   return function(){
//     timeout ? clearTimeout(timeout) : req()
//     timeout = setTimeout(() => timeout = null,2000)
//   }
// }
//绑定事件
document.getElementById('btn').onclick = fn()  

2.节流

思路：点击后不会立即执行，到规定时间后（倒计时完毕）才会执行，然后每次点击，都只会在规定的时间内执行一次，因为每次倒计时完成才会将timeout重置为null，然后再次进入该判断内语句，当timeout有值时候不会进行任何处理

function fn(){
  let timeout;
  return function(){
    if(!timeout){
      timeout = setTimeout(function(){
        timeout = null
        req()
      },2000)
    }
  }
}