最近准备面试，得过一遍基础知识，防抖和节流学过也用过，但是还是很容易混淆，所以要来总结一下。
防抖
说到防抖，我会把它理解为防止抖动，我是这么记忆的：
当你跟某人对话时，如果对方一直说，你处于礼貌，不应该打断他，所以你会听他讲，等到他讲完，你确定他讲完之后，你就会开始发表你的意见。
即在一段时间内，对方不断说话，等你你发现对方讲完（即对方最后一次开口）时，你进行回复。其中，
防抖即是任务频繁触发下，只有任务触发的间隔超过了指定间隔的时候，任务才会执行。
所以在对方不断抖动嘴巴跟你讲述某件事情时（任务频繁触），等待你发现他讲完某件事情之后（嘴巴不抖动了），赶紧回复他，阻止他嘴巴抖动。
function debounce(fn, wait) {
// 每次触发这个函数，说明你不能回复，所以回复时间是null
let timer = null;
return function() {
let context = this;
let args = arguments;
clearTimeout(timer);
// 一段时间后（即这个timer没有被置为null的时候，就会执行
timer = setTimeout(() => {
fn.call(this, arguments);
}, wait)
}
}
Demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>防抖</title>
</head>
<body>
<button id="debounce">点我防抖！</button>
<script>
window.onload = function() {
// 1、获取这个按钮，并绑定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce));
}
function debounce(fn) {
// 每次触发这个函数，说明你不能回复，所以回复时间是null
let timer = null;
return function() {
let context = this;
let args = arguments;
clearTimeout(timer);
// 一段时间后（即这个timer没有被置为null的时候，就会执行
timer = setTimeout(() => {
fn.call(this, arguments);
}, 1000)
}
}
// 3、需要进行防抖的事件处理
function sayDebounce(text) {
// ... 有些需要防抖的工作，在这里执行
console.log("防抖成功！");
}
</script>
</body>
</html>
实际应用就是在输入框触发事件那里啦，我们可以等一段时间内用户最后一次输入时在触发相应的事件。
节流
节流，开源节流。一段时间内只执行一次，又要联想了。
在一段时间内，室内问题由于高于外面的温度，所以空调会自动制冷。
function throttle(fn, 1000) {
// 第一次的时候空调是可以跑的
let canRun = true;
return function() {
if(!canRun) return;
// 空调开始制冷之后就等室内温度降低时之前是不会再重复启动制冷的
canRun = false;
let context = this;
let args = arguments;
setTimeout(( ) => {
fn.call(context, args);
canRun = true;
}, 1000);
}
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>节流</title>
</head>
<body>
<button id="throttle">点我节流！</button>
<script>
window.onload = function() {
// 1、获取按钮，绑定点击事件
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click", throttle(sayThrottle));
}
// 2、节流函数体
function throttle(fn) {
// 第一次的时候空调是可以跑的
let canRun = true;
return function() {
if(!canRun) return;
// 空调开始制冷之后就等室内温度降低时之前是不会再重复启动制冷的
canRun = false;
let context = this;
let args = arguments;
setTimeout(( ) => {
fn.call(context, args);
canRun = true;
}, 1000);
}
}
// 3、需要节流的事件
function sayThrottle() {
console.log("节流成功！");
}
</script>
</body>
</html>
实际应用就是在监听滚动那里啦。