关于vue.js:vue-watch监听触发防抖

31次阅读

共计 604 个字符,预计需要花费 2 分钟才能阅读完成。

<template>
  <div>
    <el-input v-model="search" />  
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      search: '',
      timer:null
    }
  },
  watch: {
    search: {handler (newVal, oldVal) {if (this.timer) {clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {this.getGoods();
        }, 1000)
 
      },
      deep: true
    }
  },
  methods: {getGoods(){console.log('申请一次')
    }
  }
}
</script>
 

裁减知识点

什么是防抖

防抖,即短时间内大量触发同一事件,只会执行一次函数,实现原理为设置一个定时器,约定在 xx 毫秒后再触发事件处理,每次触发事件都会从新设置计时器,直到 xx 毫秒内无第二次操作,防抖罕用于搜寻框 / 滚动条的监听事件处理,如果不做防抖,每输出一个字 / 滚动屏幕,都会触发事件处理,造成性能节约。

什么是截流

防抖是提早执行,而节流是距离执行,函数节流即每隔一段时间就执行一次,实现原理为设置一个定时器,约定 xx 毫秒后执行事件,如果工夫到了,那么执行函数并重置定时器,和防抖的区别在于,防抖每次触发事件都重置定时器,而节流在定时器到工夫后再清空定时器

正文完
 0