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

前端面试中常问的防抖和节流

程序员文章站 2022-06-09 21:40:03
...
  1. 防抖

应用场景:
(1) keyup 事件
(2)调整窗口大小

原理:假设等待时间为500ms,如果500ms之内有请求,则计时器清零重新开始计时,直到500ms之内没有请求,则执行函数。

function debounce(fn,wait){
	let timer=null;
	return function(...args){
		if (timer){
				clearTimeout(timer)
		}
		else{
			
		}
		timer=setTimeout(() =>{
			fn.apply(this,args)
		},wait)
	}

}

  1. 节流

应用场景:
(1)鼠标不断点击触发
(2)监听滚动事件
原理:假设等待时间为500ms,如果500ms之内有多个请求,忽视500ms之内除了第一次请求的请求,在500ms后触发回调函数执行。

function throttle(fn,wait){
	let timer=null;
	return function(...args){
		if (timer) return;
		timer=setTimeout(()=>{
			fn.apply(this,args)
			timer=null;
		},wait)
	}
}