防抖和节流的个人理解

概念

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间；

节流

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，无视触发;

防抖和节流的函数封装

防抖

	/*
	* fn [function] 需要防抖的函数
	* time[number] 毫秒，防抖期限值
	*/
	//防抖
	function debounce(fn,time){
		let timer =false;//利用闭包使得外部可以访问timer
		return function(){
			if(timer){clearTimeout(timer)};//如果timer存在,说明在计时中并且触发了函数,此时应该关闭计时器，下一步重新计时
			timer=setTimeout(fn,time);//重新计时
		}
	}

节流

	/*
	* fn [function] 需要节流的函数
	* time[number] 毫秒，节流期限值
	*/
	//节流
	function throttle(fn,time){
		let switch=true;//设定一个开关switch,利用闭包使得外部可以访问switch
		return function(){
			if(!switch)return;//开关关闭时,退出执行
			switch=false;//执行前关闭开关
			timer=setTimeout(()=>{
				fn();//执行函数
				switch=true;//执行结束后打开开关
			},time);//重新计时
		}
	}

应用场景

防抖

1. 搜索框input事件,为了防止在输入过程中不断的发送请求,造成页面卡顿,这个时候就需要防抖,在输入完成之后再发送请求;
2. onScroll事件,防止滚动浏览器时不断触发加载页面,通常在停止滚动后一段时间再请求数据;

节流

1. 注册登录等表单校验事件,防止用户多次点击注册登录,一般在点击注册登录后一段时间无法再次点击,这个时候使用节流;
2. 抢购商品时防止多次付款,只在第一次点击时生效;

个人理解

防抖和节流都是js性能优化常见的解决方案,两者从概念上来说,有相似点,也有不同点,很容易造成混淆,我们可以通过现实生活中的例子来帮助理解。
场景一: 等公交车时候，人们排队上车，只有当所有人都上车后，司机才关闭车门，开车。
场景二: 打出租车时,只要有人上了车立马开车,其他人只能等下一辆出租车。
场景一就是防抖，场景二就是节流，开车是执行函数。