作用：
防抖和节流本质都是为了优化高频率执行代码或任务的一种手段。
比如：浏览器的滚动事件(scroll)、推拽(mousemove)、输入框(input)等事件在触发时，会不断地调用绑定在事件上的回调函数，导致浪费资源、拉低性能。
采用防抖(debounce)和节流(throttle)的方式来减少调用频率也就是限制此类事件调用回调的次数就可以解决。
防抖节流定义：
节流：
在规定时间内连续、频繁的触发事件，只会执行最后一次触发的事件处理函数。
防抖：
在规定时间后才去执行该事件，如果在规定时间内被重复触发，则会从头开始计算执行时间。
防抖节流区别：
相同点：
1、都可以通过使用 setTimeout 实现。
2、其最终目的都是降低回调执行的频率，节省资源。
不同点：
1、函数防抖在一段连续操作结束之后再去处理回调函数，可以使用 clearTimeout 和 setTimeout
实现。函数节流不管触发事件有多频繁，在规定时间内只执行一次事件函数处理。
2、函数防抖关注的点在规定时间内连续触发的事件，只要你反复触发事件那我就反复的重新计算。
防抖节流实现：
防抖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id='inp'>
</body>
</html>
<script>
//防抖函数
function _debounce(fn, delay) {
var delay = delay || 200;
var timer;
return function() {
var th = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
timer = null;
fn.apply(th, args);
}, delay);
};
}
//模拟一段ajax请求
function ajax(content) {
console.log(content)
};
let inputa = document.getElementById('inp');
function fn(e) {
ajax(e.target.value)
}
//防抖函数，处理多次被触发的事件，只执行最后一次
inputa.addEventListener('input', _debounce(fn, 1000))
</script>节流：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id='unDebounce'>
</body>
</html>
<script>
//节流函数
function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function() {
var th = this;
var args = arguments;
var now = +new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function() {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
function show(value) {
console.log(value)
};
let inputa = document.querySelector('.inp');
function fn(e) {
show(e.target.value)
}
//防抖节流，无论你输入多块，每隔1秒钟执行一次
inputa.addEventListener('input', _throttle(fn, 1000))
</script>