Vue实现函数防抖和节流

最新推荐文章于 2026-04-11 09:14:31 发布

原创最新推荐文章于 2026-04-11 09:14:31 发布 · 677 阅读

6 ·

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

标签

#javascript

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue项目中实现函数的防抖和节流功能。首先，在全局utils文件夹下创建了globalFunction.js，然后在单页面组件中导入这些函数。最后，强调在调用这些函数时应注意避免使用箭头函数，防止this指向错误。提供了一份完整的代码实现。

效果：
在这里插入图片描述

一、在utils文件加下创建globalFunction.js文件

export default {
    //防抖
    debounce(func, wait) {
        let timeout;
        return function () {
            const context = this;
            const args = [...arguments];
            if (timeout) clearTimeout(timeout);
            timeout = setTimeout(() => {
                func.apply(context, args)
            }, wait)
        }
    },
    //节流
    throttle(func, wait) {
        let timeout;
        return function () {
            let context = this;
            let args = arguments;
            if (!timeout) {
                timeout = setTimeout(() => {
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }

        }
    }
}

二、在单页面中进行导入

import globalFunction from "@/utils/globalFunction.js";

三、调用方法时注意！

函数调用避免使用箭头函数，以免this指向globalFunction

 methods: {
    //debChange和thrChange为点击事件
    debChange:globalFunction.debounce(function(){
      this.debounceValue2 = this.debounceValue1;
    }, 1000),

    thrChange: globalFunction.throttle(function() {
      this.throttleValue2 = this.throttleValue1;
    }, 1000),
  },

完整代码：

<template>
  <div>
    <a-page-header
      title="返回"
      sub-title="| 防抖节流"
      @back="gohome()"
      style="padding: 5px"
      backIcon="<"
    />
    <div style="display: flex">
      <a-input
        v-model="value"
        style="width: 200px; margin-top: 45px"
        addonAfter="未做处理"
      ></a-input>
      <span> 响应数据：{{ value }}</span>
    </div>
    <div style="display: flex">
      <a-input
        v-model="debounceValue1"
        style="width: 200px; margin-top: 45px"
        addonAfter="防抖处理"
        @change="debChange"
      ></a-input>
      <span> 响应数据：{{ debounceValue2 }}</span>
    </div>
    <div style="display: flex">
      <a-input
        v-model="throttleValue1"
        style="width: 200px; margin-top: 45px"
        addonAfter="节流处理"
        @change="thrChange"
      ></a-input>
      <span> 响应数据：{{ throttleValue2 }}</span>
    </div>
  </div>
</template>
<script>
import globalFunction from "@/utils/globalFunction.js";
export default {
  data() {
    return {
      value: "",
      debounceValue1: "",
      debounceValue2: "",
      throttleValue1: "",
      throttleValue2: "",
    };
  },
  created() {},
  methods: {
    gohome() {
      this.$router.push({ path: "/employ" });
    },
    debChange: globalFunction.debounce(function () {
      this.debounceValue2 = this.debounceValue1;
    }, 1000),

    thrChange: globalFunction.throttle(function () {
      this.throttleValue2 = this.throttleValue1;
    }, 1000),
  },
};
</script>