vue组件里引入使用外部防抖函数

最新推荐文章于 2024-09-21 11:29:05 发布

予倾

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量85

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/QZ9420/article/details/130561735

版权

文章介绍了如何在Vue组件中使用debounce函数，以防止频繁触发的事件（如tagCascaderChange）对性能造成影响。通过设置延迟时间，确保事件在最后一次触发后才执行，优化了处理大量数据时的性能。该方法需要传入当前组件实例，以便正确调用相关属性和方法。

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

tools.js

export const debounce = (func, delay) => {
    let timer = null;
    return function () {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    }
}

vue组件

// 引入
import { debounce } from '@/utils/tools'
// 使用
methods: {
	// 注：这个方法需要手动把当前组件实例传递进来
    tagCascaderChange: debounce((val, that) => {
      let str = ''
      if (that.tagCascaderValues.length) that.tagCascaderValues.forEach(item => str += " " + item[0])
      that.$emit('filterTableDataByTags', str.trim())
    }, 1000),
}