js vue 函数防抖

什么是防抖?

防抖就是监听事件触发后,N秒之后再执行要操作的事物.
在设定的时间周期内,如果再次被触发,则取消回调,重新开始计时
和防抖容易混淆却又相互关联的还有节流.

防抖的应用场景?

通常用于避免高频的http请求,避免资源的浪费.
如搜索框的联想推荐,当输入内容较快时,仅在最后停顿时间略长的一次发起请求.

类比理解

防抖可以理解安全的爆破
工作人员安装炸弹并设置定时器3分钟,离开现场确保安全后,自动引爆.
但是3分钟内如果再次重新校队,那么就需要拆除原先的炸弹,再重新设置一个新的3分钟倒计时炸弹,确保能够安全离开.
如果还是不理解,那么还可以理解为游戏的回城技能,如王者荣耀.
发起回城技能,需要5秒,期间不能被攻击,否则被打断,需要重新发起回城,再等5秒,直至回城.

代码的思路

需要一个倒计时,一个监听,一个事件.
每触发一个监听,就检查是否有倒计时,如果有,则清除,然后重新计时,如果没有,则创建一个倒计时,
时间一到,自动执行事件.

vue代码

// timer用于储存定时器
delayed(){
    // 检测定时器
    if(this.timer){
        // 如果有定时器,则清除
        clearTimeout(this.timer)
        this.timer=null
    }
    // 设置定时器和事件
    this.timer=setTimeout(()=>{
        // do something
    },500)
}