js vue 函数防抖

vue 防抖

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

防抖的应用场景?

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

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

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