防抖函数在Vue中的应用

这里先贴出代码

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器,延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}

说明:这个节流函数也是我在网上找的,但是我直接调用执行是不起作用的,原因是有些代码有错误,还有就是要修改某些参数的和this的指向。
下面是我修改之后的代码

debounce1(func, wait = 500) {
      // 这个定时器一定不能是这个函数私有的,一定是要放在Data中,如果
      // 没有放在data中则会出现点击几次就触发几次,虽然说点击后确实会延迟执行,但是没有起到节流应该有的效果
      // let timer = this.timer
      // debugger
      // 这里返回的函数是每次用户实际调用的防抖函数
      // 如果已经设定过定时器了就清空上一次的定时器
      // 开始一个新的定时器,延迟执行用户传入的方法
      // 这里的this一定要保存副本!!!!!!
      var _this = this
      return function(...args) {
        if (_this.timer) clearTimeout(_this.timer)
        // console.log('77')
        _this.timer = setTimeout(() => {
          func.apply(_this, args)
        }, wait)
      }
    },

对修改之后的代码说明:

  1. 我把timer设置在data中,这样就可以保存这个变量的值,我已经试过了,如果没有放到data中会出现点击多少次按钮就执行多少次的情况,虽然执行的时候会实现延迟执行的效果
  2. this的指向, 在return函数中,需要修改this的执行,这里我用_this保存了this(Vue的实例),然后我用里面的timer我并没有用变量存放其他,因为存放起来的话就起不到‘共有’这个作用了,而且代码会执行不了
  3. 在调用之后,记得要在末尾加上(),不然就根本没调用return回来的函数,所以函数不会被执行
### 在 Vue 中实现和使用防抖函数 #### 实现方式 在 Vue 中可以借助 JavaScript 原生代码手动实现 `debounce` 函数,或者引入第三方库(如 Lodash 的 `_.debounce` 方法)来简化开发流程。 以下是两种常见的实现方案: --- #### 手动实现 Debounce 函数 一种简单的手写防抖函数如下所示[^1]: ```javascript function debounce(func, wait, immediate) { let timeout; return function(...args) { const context = this; const later = () => func.apply(context, args); clearTimeout(timeout); // 清除之前的定时器 if (immediate && !timeout) { func.apply(context, args); } timeout = setTimeout(later, wait); }; } ``` 此函数接受三个参数: - `func`: 需要被延迟执行的函数。 - `wait`: 延迟的时间间隔(单位毫秒)。 - `immediate`: 是否立即执行第一次调用,默认为 `false`。 将其封装到工具文件中以便复用。 --- #### 使用 Lodash 库中的 Debounce 如果想自己编写逻辑,可以直接利用成熟的第三方库——Lodash 提供的功能。安装 Lodash 后,在组件中按需导入即可[^3]: ```bash npm install lodash.debounce ``` 随后可以在 Vue 组件中这样使用: ```javascript import _ from 'lodash'; export default { data() { return { searchQuery: '' }; }, methods: { handleSearch: _.debounce(function() { console.log('正在搜索:', this.searchQuery); // 可在此处发起 API 请求或其他耗时操作 }, 500), onInputChange(event) { this.searchQuery = event.target.value; this.handleSearch(); // 调用防抖后的函数 } } }; ``` 上述例子展示了如何将输入框的内容变化绑定至带有防抖功能的方法上。 --- #### Vue 3 Composition API 下的应用实例 对于基于 Vue 3 和 `<script setup>` 的场景,则可参考以下代码片段[^2]: ```html <template> <input type="text" @input="handleInput"> </template> <script setup> import { ref } from 'vue'; // 自定义或从外部工具包加载 debounce 工具方法 import { debounce } from '@/utils/debounce.js'; const query = ref(''); const delayedAction = () => { console.log('最终查询值:', query.value); }; // 创建 debounced 版本的动作处理器 const handleInput = debounce((event) => { query.value = event.target.value; delayedAction(); }, 300); </script> ``` 注意这里通过组合式 API 定义了一个响应式的变量 `query` 来存储用户的输入数据,并且把实际业务逻辑包裹进了防抖机制里头。 --- #### 销毁阶段清理工作 无论采用哪种形式构建防抖效果,请务必考虑当关联 DOM 或者监听器再存在之后及时释放资源以防泄露问题发生。比如在一个生命周期钩子里面移除未完成的任务: ```javascript beforeDestroy() { if (this.handleSearch.cancel) { this.handleSearch.cancel(); // 如果有 cancel 方法则调用之 } }, ``` 以上就是关于如何在 Vue 环境下运用防抖技术的具体说明。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值