防抖与节流 （场景、函数封装）

防抖

场景：输入框实时查询

第一次输入触发事件时，开始计时：（比如计时500ms）

• 计时500ms到了，执行第一次触发的查询
• 如果计时500ms还没有到，第二次事件又触发了，则清除第一次的计时，重新计时，如果计时500ms到了，执行查询，如果未到第三次事件又触发了，则又重新计时…（用户触发事件过于频繁，只执行最后一次）

比喻：一条公路上规定时间内只允许通过一辆车

• 如果在规定的时间内，第一辆车跑完了，就去领奖
• 如果这辆车到时间了还没跑完，就扔下去，第二辆车上路，重新计时…

<input type="text" id="input">

未经过防抖之前js代码：

let iptDom = document.getElementById("input")
iptDom.oninput = function(){
   
    console.log(this.value)
     //拿到输入框