防抖、节流

一、防抖

防抖：是指一段时间内，没有再触发事件，就执行这个事件；如果一段时间内又触发了这个时间，则清空已经间隔的时间，重新开始计时，等待事件触发。

场景：搜索框输入关键字，实时请求后台获取结果。

function debounce(fn, delay) {
	let timer = null; // 用到了闭包
	return (val) => {
		let args = val;
		if(timer) {
			clearTimeout(timer);
		}

		timer = setTimeout( () => {
			fn(args);
		}, delay)
	}
}
function con(value) {
	console.log(value);
}
let debounceFunc = debounce(con, 500);
let input = document.getElementById('input');
input.addEventListener('keyup', function() {
	debounceFunc(1);
})

二、节流

节流：当连续触发某个事件时，运用节流可以保证在一段时间内，只触发一次事件。

场景：监听滚动事件，做相应操作，比如：懒加载。

function throttle(fn, delay) {
	// 利用闭包声明上次操作的时间变量，存放延时器的timer变量
	let last = 0, timer = null;
	// 将执行结果以函数的形式return出去
	return (value) => {
		// 定义当次操作的时间点
		let now = +new Date();
		let args = value;
		// 如果这次与上一次的时间间隔大于规定的时间长，则执行
		if(now - last > delay) {
			last = now;
			fn(args);
		} else {
			// 如果这里不写else的话，那么最后在小于时间间隔内连续触发，则不会执行；因此在这里用防抖的方法，加个延时器，延迟一段时间后执行
			clearTimeout(timer);
			timer = setTimeout(() => {
				last = now;
				fn(args);
				console.dir(timer);
			}, delay)
		}
	}
}
function fn(value) {
	console.log(value);
}
let throttleFunc = throttle(fn, 500);
let input = document.getElementById('input');
input.addEventListener('keyup', function(e) {
	throttleFunc(e.target.value);
})