vue封装utils——防抖

Wether or not

已于 2022-06-30 21:10:31 修改

阅读量539

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

于 2022-06-30 21:09:44 首次发布

本文链接：https://blog.csdn.net/wehter/article/details/125548185

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中利用防抖(debounce)优化方法，通过debounce函数封装延迟执行，以减少输入焦点事件频繁触发带来的性能问题。实例展示了在`inputFocus`方法中调用防抖函数以搜索数据，提高用户体验。

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

vue封装utils之防抖

// src/common/js/utils.js
let _debounceTimeout = null,
_throttleRunning = false;
/**
*防抖
*@params{Function}执行函数
*@params{Number} delay 延时ms
*/
export const debounce = (fn,delay = 500) => {
	clearTimeout(_debounceTimeout);
	_debounceTimeout = setTimeout(() => {
		fn();
	},delay)
}


// main.js
import{debounce} from '@/common/js/utils'
Vue.prototype.$util = {
	debounce
}

// index.vue
methods:{
	inputFocus(){
		this.$util.debounce(this.$util.debounce(this.initData, 500))
	}
	initData(){
		console.log('输入框foces,搜索数据ing')
	}
}