JavaScript之防抖与节流、debounce、clearTimeout、setTimeout、throttle、getElementById

---

防抖

1、多种不同的解释(定义)

1、短时间内多次触发，最终在停止触发后的某个指定时间执行一次函数，只执行一次。
2、防抖: 指触发事件n秒后才执行函数，如果在n秒内又触发事件，则会重新计算函数执行时间。
3、防抖是n秒内重复的触发会导致重新计时，直到n秒内没有重复触发函数才会执行。

---

2、示例1-监听滚动条

let timer;
window.onscroll = function() {
	// 如果当前 timer 不是 undefined ，
	// 说明前面有一个等待的请求还未发送，
	// 就停止前面的等待
	if (timer !== undefined) clearTimeout(timer);
	// 再重现下一轮等待
	timer = setTimeout(function() {
		// 当 500ms 内，未发生滚动时，
		// 才发送正式的 ajax 请求
		console.log('发送ajax请求');
	}, 500);
};

---

3、示例2-按钮点击

<button id="btn">防抖</button>

// 500 毫秒内多次触发只会执行一次
function clearT() {
	let timer;
	
	return function() {
		// 如果 500 毫秒内又一次触发，
		// 则会重新计算时间
		// if (timer) clearTimeout(timer): 
		// 相当于清除定时器并且 return
		if (timer) clearTimeout(timer);
		
		timer = setTimeout(() => {
			console.log('发送请求');
		}, 500);
	}
}
// document.querySelector('#btn'): 通过 id 获取元素
// addEventListener('click', clearT()): 给元素添加监听事件 clearT()
document.querySelector('#btn').addEventListener('click', clearT());

---

节流

1、多种不同的解释（定义）

1、短时间内多次触发，即使触发仍在继续也可以根据指定。时间触发一次函数 — 至少执行一次。
2、节流: 指连续触发事件，但是在n秒中只执行一次函数。 节流会稀释函数的执行频率。
3、节流是n秒内只会执行第一次触发的函数，重复的触发无效。

---

2、示例1 - 按钮点击

<button id="btnThrottle">节流</button>

// 初次点击按钮可以触发请求
let canClick = true;
// 给按钮元素绑定点击事件
document.getElementById('btnThrottle').onclick = function() {
	// 点击第一次发送请求
	if (canClick) {
		// 发送请求立即给 canClick 赋值为 false
		canClick = false;
		console.log('发送ajax请求');
		setTimeout(() => {
			console.log('加载完成！');
			// 等请求返回响应才可以发送第二次
			canClick = true;
		}, 1000);
	}
};