JS基础---函数防抖和节流

函数防抖和节流

防抖 debounce

概念

在一段时间内，触发一个函数，只执行一次。并且在该段时间内，再次触发事件时，重新计时一段时间。

具体的实现都是借用setTimeout()函数，分为立即执行和非立即执行两种。一般根据业务具体需求决定，可以在封装的debounce()函数中加入是否立即执行。
具体代码如下：

function debounce_test(func, wait, now) {  //now判断是否立即执行
		let timeout;
		return function () {
			let context = this;            //保存this 和函数参数，确保this指向不变和e函数的执行
			let args = arguments;

			if (!now) {   //非立即执行版本
				if (timeout) clearTimeout(timeout)  //timeout为ture说明有计时正在计时，此时应该重新计时。
				//实现方法为清空计时器，新设一个计时器并把id赋值给timeout

				timeout = setTimeout(() => {
					func.apply(context, args);
				}, wait)
				//若正常，在计时结束后调用函数。实现wait时间后调用函数，且重复调用时重新计时
			}
			else {
			//即时版本类似，但会根据是否存在计时器来调用函数，计时器的作用是将计时器在计时完成后清零。
			//实现立即执行，且在wait时间内再次调用不再执行函数。
				let doNow= !timeout;
				if (timeout) clearTimeout(timeout)

				timeout = setTimeout(()=>{
					timeout = null;
				},wait)
				if (doNow) {
					func.apply(context,args)
				}
			}
		}

	}

节流（throttle）

概念

一段时间内，函数只执行一次。有两种实现方式，时间戳和定时器实现。
大多使用结合版本或根据项目需要进行选择

```javascript
//定时器版本
function throttle(func, wait) {
		let timeout;
		return function () {
			let context = this;
			let args = arguments;
			if (!timeout) {
				timeout = setTimeout(() => {
					timeout = null;
					func.apply(context, args)
				}, wait)
			}
		}
	}
//时间戳版本
function throttle_data(func, wait) {
		let previous = 0;
		return function () {
			let now = Date.now();
			let context = this;
			let args = arguments;
			if (now - previous > wait) {
				func.apply(context, args);
				previous = now;
			}
		}


	}