什么事防抖和节流

139 阅读1分钟

什么事防抖和节流

防抖

触发高频事件后 n 秒内事件只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间;防止一个事件多次触发,就设置一个定时器,在规定时间函数只会触发一次,如果在规定时间内再次触发,就重新计算时间,比如你3秒后触发一个事件,这个事件在3秒后才会触发,你在3秒内再次点击,就会重新等3秒后触发

function a(fn,delay){
	vat timmer = null
	//清除上一次延时器
	return funcion(){
		clearTimeout(timmer)
		//重新设置一个延时
		timmer = setTimeout(()=>{
			fn.call(this)
		},delay)
	}
}

节流

高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率。 思路: 每次触发事件时都判断当前是否有等待执行的延时函数。 防止用户多次触发事件,设定在规定时间内事件只能触发一次,时间过来再触发第二次

var cd = false
if(cd){
	console.log('请不要频繁触发')
}else{
	fn()
	cd = true
	var timmer = setTimeout(()=>{
		cd = false
	},3000)
}