防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数
只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
，scroll，mousemove ,mousehover 等会短时间内多次触发（频繁触发），不做限制的话可能一秒执行几百次，
在这些函数内部如果还执行了其他函数，尤其是执行了操作 dom 的函数的话（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，
还会降低程序运行速度，甚至造成浏览器卡死、崩溃。
除此之外，短时间内重复调用 ajax 不仅会造成数据关系的混乱，还会造成网络拥堵，增加服务器压力等问题。
防抖的关键是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。
如果方法多次触发，则把上次记录的 延迟执行代码
用 clearTimeout 清掉，重新开始计时。
若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码
。
注意：当你一直连续不断的点击超过你设置的时间，并且只有第一次点击有效，这不是bug，这是概念问题，注意看下面标红这部分，
防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js防抖与节流</title>
</head>
<body>
<!--按钮-->
<button id="btn">点击提交</button>
<script type="text/javascript">
var num = 1;
const seckill = () => {
console.log('我是防抖，你点击了按钮' + num++)
}
// 防抖函数
const debounce = (fun, wait) => {
let timeout;
return function () {
if (timeout) {
clearTimeout(timeout);
}
//第一次执行任务，timeout是null，此时callNow是true，需要立即执行
let callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) {
fun.apply(this);
}
}
};
//点击提交按钮
let btn = document.getElementById('btn');
//调用方法（ 1s内只允许一次操作）
btn.addEventListener('click', debounce(seckill, 1000));
</script>
</body>
</html>节流又叫函数节流（throttle）：指当持续触发事件时，保证一定时间段内只调用一次事件处理函数
。
节流和防抖都是差不多的，区别在于是“立即执行版” 和 “非立即执行版
”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js防抖与节流</title>
</head>
<body>
<!--按钮-->
<button id="btn">点击提交</button>
<script type="text/javascript">
var num = 1;
const seckill = () => {
console.log('点击了按钮' + num++)
}
function throttle(callback, delay) {
var timer, begin = new Date();
return function () {
//记录事件触发时的时间
var current = new Date();
//清除上一次定时器任务
clearTimeout(timer);
//判断距上一次触发是否已过了delay的时间
if (current - begin >= delay) {
callback();
begin = current;
} else {
timer = setTimeout(() => {
callback();
}, delay);
}
}
}
//点击提交按钮
let btn = document.getElementById('btn');
//调用方法（ 1s内只允许一次操作）
btn.addEventListener('click', throttle(seckill, 1000));
</script>
</body>
</html>函数防抖：是n秒内只执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
函数节流：是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
原理：
防抖是维护一个计时器
，规定在delay时间后触发函数，但是在delay时间内再次触发的话，都会清除当前的 timer 然后重新设置超时调用，即重新计时。这样一来，只有最后一次操作能被触发。
节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。
函数防抖的设计思路就是在函数执行前加一个等待时间，在这个等待时间内如果该函数又需要执行一次，就重新计算等待时间，再次等待，依次类推
，直到等待时间到了，还没有等到函数又需要执行的情况，才会执行这个函数。
就拿上述的场景来说，假设向后台发送 ajax 请求的响应时间大概是在 2s 左右，那就设置这个等待时间为 2s，当用户第一次点击 加载更多 按钮后，该回调函数
并没有立即执行，也就是还没有开始发送 ajax，此时该函数在等待，如果在 2s 内用户又点击了 加载更多，那就重新计算等待时间，再等待 2s ，此时 2s 过去了，用户没再第三次点击 加载更多 按钮了，那么该函数就开始执行了，向后端发送 ajax 请求了。
实现方式如下：
function debounce(fn, delay){
let timeId = null
return function(){
let context = this
if(timeId){window.clearTimeout(timeId)}
timeId = setTimeout(()=>{
fn.apply(context, arguments)
timeId = null
},delay)
}
}函数节流的设计思路是在函数执行后加一个冷却时间，函数在第一次执行时是立马执行，但在其执行完后设置一个冷却时间，在冷却时间内，该函数不能再次执行，直到冷却时间结束允许该函数执行了，才可以再次执行。
就拿上述的场景来说，冷却时间假设也设置为 2s，在用户第一次点击 加载更多 后按钮的回调函数就会执行，也就是会向后台发送 ajax 请求，此时用户又立马再次点击了 加载更多 按钮，由于此刻 2s 的冷却时间还没有到，那么就会给第二次的函数执行加上一个延迟执行。
function throttle(fn, delay){
let canUse = true
return function(){
if(canUse){
fn.apply(this, arguments)
canUse = false
setTimeout(()=>canUse=true, delay)
}
}
}节流：在一定时间内连续触发某事件，在这段时间段内只执行首次触发的那一次。1s内执行第一次
防抖：在一定时间内连续触发某事件，在这段时间内只执行最后一次触发的那一次。最后一次延时1s后执行
//方法一：利用闭包保存时间
const throttle = function(fn,delay){
let prev = Date.now()
return ()=> {
let now = Date.now()
if (now - prev >= delay) {
fn()
prev = Date.now()
}
}
}//方法一：利用闭包保存延时器
const debounce = function(fn,delay){
let timer = null
return ()=> {
clearTimeout(timer)
timer = setTimeout(()=>fn(), delay)
}
}防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。
想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢
代码如下，可以看出来防抖重在清零 clearTimeout(timer)
function debounce (f, wait) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
f(...args)
}, wait)
}
}节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。
代码如下，可以看出来节流重在开关锁 timer=null
function throttle (f, wait) {
let timer
return (...args) => {
if (timer) { return }
timer = setTimeout(() => {
f(...args)
timer = null
}, wait)
}
}