欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js原生实现防抖节流

程序员文章站 2024-02-08 14:29:04
...

共同点:都用到了setTimeout定时器,都是在指定时间间隔后执行函数,都是为了解决数据时时变化而时时请求导致性能差的问题

区别:防抖在指定时间间隔里再次调用函数,会清除定时器,重新计时,直到在最新的计时时间间隔里没有调用函数,才会执行定时器里的函数。
而节流会在指定时间间隔后会执行一次函数,不会清除定时器而重新计时

防抖缺点:当用户在指定时间间隔里一直操作,那么setTimeout会一直重新计时函数永远不会执行
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

节流缺点:如果用户一直操作,那么setimeout里的函数会在指定时间间隔后都会执行一次,如此反复
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

以监听input的值举例:

// 防抖
var input = document.getElementById('input')
input.addEventListener('input', debounce(handle, 1000))
function debounce(fn,delay = 20){
	var timer = null;
	return function(...args){
		if(timer){
			clearTimeout(timer)
		}
		timer = setTimeout(()=>{
			fn.apply(this,args)
		}, delay)
	}
}
function handle(e){
	console.log(e.target.value)
}
// 节流
var input = document.getElementById('input')
input.addEventListener('input', throttle(handle, 200))
function throttle(fn,delay = 20){
	let timer = null;
	let flag = true;
	return function(...args){
		if(!flag){
			return;
		}
		flag = false;
		timer = setTimeout(()=>{
			fn.apply(this,args)
			flag = true
		},delay)
	}
}
function handle(e){
	console.log(e.target.value)
}