防抖：短时间内多次触发，且只执行一次
适用场景：短时间内，多次向服务器发请求，获取数据，如：搜索框、三级分类等
需要理解的知识：
1：函数的执行顺序
2：绑定一个函数，并返回一个函数，不会执行函数内部返回的函数
3：绑定一个函数调用，js加载完成，只会执行一次外部的数据
4：点击按钮时，只会执行返回的内部函数
了解以上内容后，理解正片就容易了
正片：
代码：
注释代码：均为测试代码
注意：外部的 timer 可以定义成任何类型的数据（如：undefined、null、NaN也可以定义，timer的主要作用是充当一个容器），因为函数内部是从上往下执行。所以，清空定时器，必须写在创建定时器之前，这样就得提前把timer容器创建好。
<!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>防抖</title>
</head>
<body><!-- <button class="add">123</button> --><input type="text" id="demo"><script>let demo = document.getElementById('demo')//获取input框demo.oninput = Fd() //创建一个构造函数function Fd(){ let timer = falseconsole.log('*'); //一创建就会执行，且只执行一次return (e)=>{ //此次的e必须要写，不然无法获取到事件对象eventif(timer){ //timer 延时器再次调用时触发，清空上一次的延时器clearTimeout(timer)}timer = setTimeout(() => {console.log(e.target.value); //每隔2秒执行一次}, 2000);}}// demo.oninput = function(){// let timer = false// console.log('*'); // return (e)=>{//此处触发事件，不会执行// if(timer){// clearTimeout(timer) // }// timer = setTimeout(() => {// console.log(e.target.value);// }, 2000);// }// }// let a = document.querySelector('.add')// a.onclick = b()// function b(){// console.log('*');// return function a(){// console.log('123');// }// }</script>
</body>
</html>
