debounce防抖是什么？运用场景？手写实现？debounce防抖是什么？运用场景？手写实现？debounce防抖的实

1.debounce防抖：

debounce防抖是用来解决前端页面频繁操作引发的页面资源过载和阻塞的方案。

debounce防抖的实现思路是： 指定一个冷却时间n秒，和一个回调函数，只有用户停止操作的时间间隔>=给定的冷却时间后，才会执行回调函数，如果用户在这个冷却时间内触发了事件，就会重新计时。

生活中的例子：人们进电梯后，如果n秒内有人进来，那么就再等n秒，冷却了n秒后，电梯开始关门运作。

2.前端运用场景

input输入，根据输入内容来查询数据

3.手写实现：

let timeId = null;
function debounce(fn,time){
  return function(){
    if(timeId){
      clearTimeout(timeId) 
    }
    // 重新计时
    timeId = setTimeout(()=>{
      fn.apply(this,arguments)
    },time)
  }
}

let timeId = null这条语句写在函数外面：

上面let timeId = null,这一条语句，我看见网上很多帖子都是写在函数debounce()里面的，但是我执行之后发现根本就没有实现debounce的功能：因为写在方法里面的时候每一次都把TimeId重置为null，导致之前的定时器id就找不到了，就无法使用clearTimeout()来清理定时器了，所以就导致每触发一次事件就会执行一次回调。

clearTimeOut(timeId)的作用：

clearTimeOut(timeId)的作用是取消超时调用:setTimeout()是在等待了Time毫秒之后，就会把代码加入执行栈，而clearTimeout()是在代码进栈之前，也就是还没有超过Time毫秒时拦截,就可以取消超时调用，结果跟什么都没发生一样。

虚心求教，欢迎指正。