一、什么是函数的防抖
概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
例子：坐公交车的时候，如果司机看到有人上车之后，就会多等待 5分钟，此时如果又有人进来（5分钟之内重复有人上车），那么公交司机就会以最后那个人为基础继续等待5分钟。所以，“函数的防抖”的关键在于，在 一个事件 发生 一定时间 之后，才执行 特定动作。
二、为什么需要函数防抖
在前端开发过程中，有一些事件，例如：onresize，scroll，mousemove ,mousehover 等等，会被频繁的触发，如果不做限制，有可能一秒之内执行几十次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数，那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。
三、函数防抖的代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖</title>
</head>
<body>
<input type="text" id="inp">
<script>
var oInp=document.getElementById('inp');
function debounce( fn,delay){
let timer = null
return function(){
var self=this,arg=argument;
clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(self,arg);
},delay)
}
}
function ajax(e) {
console.log(e,this.value)
}
oInp.oninput=debounce(ajax,1000);
</script>
</body>
</html>对于debounce(fn,delay)，返回值是一个函数，所以等同于el.οninput=denouceFn，只是一个新的事件处理函数而已，它的参数中就会包含事件对象，也就是arguments中包含事件对象。
四、什么是函数的节流
概念：函数节流（throttle），就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。
例子：坐公交车的时候，如果司机看到有人上车之后开始计时5分钟，5分钟一到马上发车。所以，“函数的节流”的关键在于，在 一个事件发生一定时间之后执行一次。
五、函数节流的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节流</title>
</head>
<body>
<input type="text" id="inp">
<script>
var oInp=document.getElementById('inp')
function throttle( fn,delay){
let timer = null
return function(){
var self=this,arg=argument;
if(timer) clearTimeout(timer)
timer = setTimeout(function(){
fn.apply(self,arg)
},delay)
}
}
function ajax(e) {
console.log(e,this.value)
}
oInp.oninput=throttle(ajax,1000)
</script>
</body>
</html>这里面clearTimeout(timer)清除了timer指向的定时器，timer=null，是修改timer的指向，是timer这个变量不指向某个定时器，然而并没有清除这个定时器，定时器依旧可以使用