一、函数防抖
大家会发现，在某东搜索框搜索商品时，每当你输入一个字符，就会有相应的商品提示：
这种情况本质上就是网页把你输入的字符向服务器提交了，然后服务器做出推测；但是如果用户每输入一个字符就提交一次，客户端和服务器端就会发生非常频繁的无效交流，在客户端网络资源有限的情况下容易影响客户体验，同时也加大了服务器的负荷；
服务器：
于是，函数防抖，应运而生。
函数防抖，即单位时间内，频繁触发事件，只会触发最后一次。
以上例搜索框提交网络请求为例，若我们规定在0.5s内，只会提交用户最后输入的信息来做检索推测，即可大幅度避免网络资源浪费，提升网络效率；同时减小服务器负荷。
思路：
1、声明全局变量存储定时器ID
2、每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
3、定时器结束时处理事件
<body>
<input type="text">
<script>
let timeID = null
document.querySelector('input').addEventListener('input', function () {
clearTimeout(timeID)
timeID = setTimeout(() => {
//在这里指代提交网络请求
console.log(this.value)
}, 200)
})
</script>
</body>
二、函数节流
目的和函数防抖一样，都是为了避免网络资源浪费，提高网络效率以及用户体验； 但不同的是，函数防抖是取单位时间内最后一次的事件触发，而函数节流则是单位时间内，频繁触发事件，只会触发一次。
思路：
1、声明一个开关
2、触发事件的时候，判断开关
3、事件触发后设置开关为false，并设置定时器
4、定时器结束时，设置开关为true
<script>
let flag = true
let i = 1
window.onmousemove = function () {
if (flag) {
flag = false
//在这里指代提交网络请求
console.log(`滚动触发次数${i++}`)
setTimeout(() => {
flag = true
}, 1000);
}
}
</script>
和函数防抖不同，函数节流的使用频率较低
