vue中防抖函数，element select组件

最新推荐文章于 2026-06-07 13:35:29 发布

原创最新推荐文章于 2026-06-07 13:35:29 发布 · 1.2k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

本文介绍了在Vue中如何运用防抖函数来优化性能。具体场景是在下拉框多选后延迟三秒加载相关条件的列表数据，避免频繁请求。通过定义一个debounce函数，实现了在指定时间内只执行最后一次操作的效果，避免了@change事件触发过于频繁导致的无效请求。在data中声明timeout变量以管理定时器，并在change事件中正确调用防抖函数。

❤️砥砺前行，不负余光，永远在路上❤️

前言

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

一、vue中防抖函数

使用场景：这里下拉框多选之后，三秒获取后边条件的列表数据（根据前边选择的内容获取新数据），直接使用@change 的话选一个就会请求数据。

在这里插入图片描述

//防抖函数(select改变)
debounce(func, wait = 3000, immediate = false) {
  // 清除定时器
  if (this.timeout !== null) clearTimeout(this.timeout);
  // 立即执行，此类情况一般用不到
  if (immediate) {
    var callNow = !this.timeout;
    this.timeout = setTimeout(function () {
      this.timeout = null;
    }, wait);
    if (callNow) typeof func === "function" && func();
  } else {
    // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
    this.timeout = setTimeout(function () {
      typeof func === "function" && func();
    }, wait);
  }
},

注意：data中需要一个timeout别忘了。

使用

changeSeList(val) {  
  let fn = async () => {
    this.getSeList(); //这个方法是获取数据的  
  };
  this.debounce(fn, 3000); //注意 这里直接传入this.getSeList() 不起作用
},

在这里插入图片描述