实现函数的防抖和节流

实现函数的防抖

什么是防抖？

1、函数可以使事件被触发n秒后再进行处理
2、n秒内事件再次被触发则重新计时
场景：一些点击请求上

防抖函数的实现

先写备注，捋一遍思路

// 输入：防抖函数fn、等待的秒数
// 输出：函数的执行
function debounce(fn, wait) {
	1. 需要一个定时器
	2. 将定时器设置成指定间隔时间后执行
	3. 中途如果再次触发，则清空重新计时
}

在备注思路中填充代码内容

// 输入：防抖函数fn、等待的秒数
// 输出：函数的执行
function debounce(fn, wait) {
	// 1. 需要一个定时器
	let timer = null;
	
	return function () {
		let  _this = this,args = arguments;
		
		// 3. 中途如果再次触发，则清空重新计时
		if (timer) {
			clearTimeout(timer);
		}
		
		// 2. 将定时器设置成指定间隔时间后执行
		timer = setTimeout(() => {
			fn.apply(_this, arrgs);
		}, wait );
	}
	
}

实现函数的节流

什么是节流？

节流值得是规定的一个时间，触发一次之后，如果在规定的时间内重复被触发了，只有一次生效
场景：使用在scroll函数的事件监听上

节流函数的实现

先写备注，捋一遍思路

// 输入：节流函数fn、节流延时
// 输出：函数的执行
1. 需要获取执行时间的时间点
2. 判断两次重复操作的时间间隔与节流延时的关系（if 大于，允许操作，else 不允许操作）
3. 获取当前时间点

在备注思路中填充代码内容

// 输入：节流函数fn、节流延时
// 输出：函数的执行
function throttle(fn , delay){

	// 1. 需要获取执行时间的时间点
	let currentTime = Date.now();
	return function () {
	
		// 3. 获取当前时间点
		let nowTime = Date.now();
		let  _this = this,args = arguments;
		
		// 2. 判断两次重复操作的时间间隔与节流延时的关系（if 大于，允许操作，else 不允许操作）
		if(nowTime - currentTime >= deyal) {
			currentTime = Date.now();
			return fn.apply(_this, args);
		}
	}
}