Vue中防抖的封装和使用

1.什么是防抖

防抖就是当触发一个事件不会立即执行，会等待 n 秒后再执行该事件，如果在等待 n 秒期间你再次出发，则会重新计时，也就是说防抖不管你触发多少次这个事件，永远只有一次在执行，并且执行的是最后一次。

2.封装

创建debounce.js文件

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

2.使用

2.1引入

import {debounce} from '../utils/debounce.js'

2.2 使用

methods: {
   
   change: debounce( fn,500 )  //fn为你需要进行防抖的函数，这里我设置500ms为定时器延时
 
}