博主博客：www.jwblog.cn

 博主开源项目：www.openapijs.com

一、防抖篇章

多次触发请求，

eg ：input值发生改变没有输入完全就向后端发送请求

 以下是源代码，又使用vuecli，elementUI组件

<template>
  <div id="app">
    <el-button>el-button</el-button>
    <el-input v-model="input" placeholder="请输入内容" @input="getData"></el-input>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      input: '',
      timer: null
    }
  },
  methods: {
    // 定时器 this.timer 初始为null
    // 异步请求给定时器 this.timer = setTimeout(()=>{},1000)
    // input值发生改变就会给 this.timer 一个不为空的值，
    // 定时器 setTimeout(()=>{},1000) 是具有返回值的
    getData () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        console.log(this.input)
      }, 1000)
    }
  }
}
</script>

<style>
</style>

二、节流篇章

短时间内触发相同的事件，只会触发一下

eg：单击事件触发次数过多，影响性能（重复做无意义事情）用户点错多点几下单击事件

<template>
  <div id="app">
    <el-button @click="buttonCli">el-button</el-button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      input: '',
      timer: null
    }
  },
  methods: {
    // 定时器 this.timer 初始为null
    // 异步请求给定时器 this.timer = setTimeout(()=>{},1000)
    // input值发生改变就会给 this.timer 一个不为空的值，
    // 定时器 setTimeout(()=>{},1000) 是具有返回值的
	
    buttonCli () {
      if (this.timer) { return }
      this.timer = setTimeout(() => {
        console.log('单击事件')
        this.timer = null
      }, 5000)
    }
    // 注意这里的操作结束后一定要 this.timer = null 否则不会再次执行单击函数
    // 注意这里的 5000毫秒 主要是为了测试，实际建议16毫秒即可
  }
}
</script>

<style>
</style>

三、Vue项目----自定义指令封装防抖

<!-- v-debounce 传递三个参数，[方法名字，触发方式，防抖时间] -->
<el-input v-model="val" v-debounce="[search,'input',500]"></el-input>


// 自定义组件防抖
Vue.directive('debounce', {
  inserted: function (el, binding) {
    const [fn, event, time] = binding.value
    let timer
    el.addEventListener(event, () => {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn()
      }, time)
    })
  }
})

 

 四、Vue项目----自定义指令封装节流

<!-- v-throttle 传递三个参数，[方法名字，触发方式，节流时间] -->
<el-button v-throttle="[searchcs,'click',5000]">节流</el-button>



// 自定义节流
Vue.directive('throttle', {
  inserted: function (el, binding) {
    const [fn, event, time] = binding.value
    let timer
    el.addEventListener(event, () => {
      if (timer) return
      timer = setTimeout(() => {
        fn()
        timer = null
      }, time)
    })
  }
})