Vue处理防抖和节流，项目中封装防抖和节流自定义指令

革履西装

已于 2022-04-28 01:15:05 修改

阅读量3.5k

点赞数 3

文章标签： vue

于 2022-03-20 18:26:55 首次发布

本文链接：https://blog.csdn.net/weixin_53641562/article/details/123618180

版权

本文介绍了前端开发中防止多次请求的防抖技术，以及限制事件频繁触发的节流技术。通过示例代码展示了如何在Vue项目中实现防抖和节流，包括自定义指令封装，以优化用户体验和提高性能。示例涵盖了输入框实时搜索的防抖处理以及按钮点击的节流处理。

摘要由CSDN通过智能技术生成

一、防抖篇章

多次触发请求，

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)
    })
  }
})