前端优化——防抖与节流

防抖和节流

优化原理：防止高频率js代码的执行

防抖：以最后的操作为标准

举个栗子：我们创建一个input输入框，然后输入内容，当我们每按下一个按键，控制台都会输出所按下的内容：

怎么样，这手速是不是似曾相识？像不像单身多年的你们？
接下来，我们来尝试着优化一下：

let inp2 = document.getElementById("inp2");
			let t = null; //计时器标识
			inp2.oninput = function() {
				if (t !== null) {
					//清除之前的定时器
					clearInterval(t);
				}
				t = setTimeout(() => {
					console.log(this.value)
				}, 500)
			}

这段代码的意思是，当检测到一个input输入事件时，启动一个定时器，每500毫秒执行一次，若500毫秒内没有检测到输入事件，则取最后一次输入的内容作为标准。
结果：

接着让我们用闭包继续优化一下：

// 防抖优化2.0
			let inp2 = document.getElementById("inp2");
			inp2.oninput = debounce(function() {
				console.log(this.value); //这是真正的业务逻辑
				console.log(this)

			}, 500);

			function debounce(fn, delay) {
				let t = null; //计时器标识
				return function() {
					if (t !== null) {
						//清除之前的定时器
						clearInterval(t);
					}
					t = setTimeout(() => {
						fn.call(this)
					}, delay)
				}
			}

**

节流

让我们以窗口滑动举个例子：当检测到窗口滑动时，在控制台输出“滑动了”

window.onscroll = function() {
				console.log("滑动了")
}

我们可以看到，只要稍微一滑动，都会被检测到从而在控制台不断输出，这对资源是有较消耗的。
**
优化一下：

let flag = true;
			window.onscroll = function() {
				if (flag) {
					setTimeout(() => {
						console.log("滑动了")
						flag = true

					},500)
				}
				flag = false;
			}

可以看到，差别很大对吧，因为每隔半秒才会执行一次，这样控制了执行次数，自然减少了对资源地消耗。
当然，咱们要雨露均沾，节流咱也用闭包优化一下：

window.onscroll = throttle(function() {
				console.log("hauodngle")
			}, 1000)

			function throttle(fn, delay) {
				let flag = true;

				return function() {
					if (flag) {
						setTimeout(() => {
							fn.call(this)
							flag = true
						}, delay)
					}
					flag = false;
				}
			}

没了。。。