函数防抖

何为函数防抖

定义：在事件被触发 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) // 设定周期
 }
}