函数节流和防抖的实现

函数防抖

何为函数防抖

定义：在事件被触发n秒后再执行回调,若是在这n秒内又被触发,则从新计时;
如何理解这段定义，能够用手机屏幕休眠来理解，若设置休眠时间为一分钟，若是在一分钟以内咱们有去操做手机，则从新从一分钟开始计算。
这个过程当中，事件可为触摸屏幕，而后事件被触发后的一分钟后屏幕休眠，可是在这一分钟内若是又触摸了屏幕，则会从新从一分钟开始计算。

如何实现函数防抖

应用场景：函数防抖通常应用于搜索框，用函数防抖来实现收集数据发送请求
eg.

let input = document.querySelector('input')
let timeID = null // 设置控制定时器的句柄
input.onkeyup = () => {
  if (timeID) {
    clearTimeout(timeID) // 若是有在延迟时间内再次触发，则清除定时器
  }
   timeID = setTimeout(() => {
    console.log(input.value,'获取搜索框内容')
  }, 200);
}

何为函数节流

定义：指连续触发事件可是在 n 秒中只执行一次函数。
字面意思就是在一段周期内，事件被触发多少次，它所指定的回调函数只执行一次
主要是用来避免一些频繁操做

如何实现函数节流

eg.

let btn = document.querySelector('#btn')
let flag = true
btn.onclick = () => {
  if (flag) {
    console.log('发送请求')
    flag = false  
    setTimeout (()=>{
    flag = true 
  },2000) // 设定周期
 }
}