前端面试之手写防抖节流

最新推荐文章于 2024-08-25 13:14:30 发布

浩浩不睡觉

最新推荐文章于 2024-08-25 13:14:30 发布

阅读量4.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47347505/article/details/123987799

在前端开发中针对连续触发和不可控的高频触发问题，防抖和节流给出了两种解决策略

一、首先讲一下什么是防抖？

**防抖：**当一个事件被触发的时候，设置一个周期来延时执行动作，若在该周期内事件又被触发，则重新设定周期，直到周期结束，执行动作。

用简单的话来解释的话，防抖就好比坐电梯，如果5s中没有人在进入的话，就关门，如果在5s内又有人进入电梯了，那么这个5s周期又重新刷新了。

二、什么是节流？

**节流：**节流会有一个固定的周期，在这个周期内，只执行一次动作，若有新事件触发，不会执行。直到周期结束，才可以再次触发执行动作。

通过游戏来解释防抖节流：防抖就是回城，节流就是按技能（想想是不是这样的）

1、手写防抖

function debounce(fn, delay){
	let timer = null;
	return function(...args){
		// 清除定时器
		clearTimeout(timer);
		timer = setTimeout(() => {
			fn.apply(this, args);
		}, delay)
	}
}

2、手写节流

// 1、时间戳方式
function(fn, delay){
	let startTime = 0;
	return function(...args){
		let nowTime = Date.now();
		if(nowTime - startTime > delay){
			fn.apply(this, args);
			startTime = Date.now();
		}
	}
}
// 2、setTimeout实现
function(fn, delay){
	let timer = null;
	return function(...args){
		if(!timer){
			timer = setTimeout(() => {
				fn.apply(this, args);
				timer = null;
			}, delay)
		}	
	}
}