防抖与节流在场景中进行函数封装

防抖

场景：输入框实时查询

当首次接收到触发事件时，系统将启动一个计时器（例如设定为500毫秒）：

• 当计时器到达500毫秒时，将执行对应的第一轮查询操作
• 若在计时器尚未结束前再次发生触发事件，则系统会取消先前的计时，并重新开始新的计时。若新的计时达到500毫秒，将执行查询；若仍未达到时间限制，而第三次触发事件发生，则继续清除当前计时并重新开始…（当用户频繁触发事件时，系统仅对最后一次触发进行响应）

类比说明：假设有一条公路，在特定的时间段内只允许一辆车通行。

• 如果第一辆车在规定时间内顺利通过，则可以领取奖励
• 若该车辆未能在规定时间内完成通行，则会被淘汰，第二辆车方可上路，并重新开始计时…

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

未经过防抖之前js代码：

    let iptDom = document.getElementById("input")
    iptDom.oninput = function(){
    console.log(this.value)
     //拿到输入框的值，去查询.. （向服务器发出请求）
     //可以看到结果，每输入一次，都会去请求一次服务器，显然是对性能