js vue 函数防抖

vue 防抖

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

防抖的应用场景?

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

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

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