前端必知：防抖与节流（面试题，复习）

Posted 2023-03-02 清颖~

前言：这其实是我两年前写的了。在某云笔记上，整理发到博客上，分享查阅方便。防抖与节流是前端面试中的高频题，需要理解透哦！

防抖

Q：简述什么是防抖？
A：在第一次触发事件时，不立即执行函数，若计时器的时间间隔之内没有再次触发事件就执行；在计时器时间间隔内又触发新的事件，会清除计时器，重新计时。

function debounce(fn,delay)
	timer=null;
	return ()=>
		if(timer)
			clearTimeout(timer);
		
		timer= setTimeout(fn,delay);//要加timer=
	

// window.addEventListener('scroll',debounce(showTop,1000));
window.onscroll=debounce(showTop,1000);

扩充：React中的防抖怎么封装？如何自定义一个防抖Hook？

应用场景：搜索框，一定时间内再触发就要重新计时，以最新的条件去查询结果。

节流

Q：什么是节流？
A：定义了标志变量。第一次触发的事件正在执行时，计时器设定时间内又触发新的事件，不会再执行。

function throttle(fn,delay)
	flag = true;//设定可以执行
	return ()=>
		if(!flag)
		
			return;
		
		flag=false;//设置执行期间状态为无效，不可以执行新的触发事件
		setTimeout(()=> 				
			fn();
			flag=true;//执行之后状态恢复
		,delay); 			
	

window.onscroll=throttle(showTop,1000);

setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行。
它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会被执行。

用于测试防抖、节流的函数

var box=document.getElementsByClassName("box")[0];	
window.addEventListener('scroll',showTop);
function showTop()
	var scrollTop=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;
		console.log("滚动条的位置："+scrollTop)
	
	/*
	* fn [function] 需要防抖/节流的函数
	* delay [number] 毫秒，防抖期限值
	*/

应用场景后续补充，时间来不及了，可先收藏~