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为定时器延时
 
}

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐