函数防抖和节流，就是控制事件触发频率的方法。
举例：
未控制节流时 函数程序每一次的输入都会被记录执行
节流的作用 函数程序每一次的执行 设置时间间隔
-
函数的节流：控制事件的触发有节制的进行 在每一次时间间隔内完成、
<body> 文本测试：<input type="text">
<script>
// 拿到输入框input操作
let inp = document.querySelector('input')
(function(flag){
//自调用函数 形参为flag 实参为true--> 同时flag当作开关变量 被赋值flag = true
})(true)
// 文本框点击事件绑定
inp.oninput = (function(flag){
return function (e){
//控制函数进程 判断开关变量 如果为false 就停止
// 如果为true 则忽略 继续往下 *关键点！*
if( flag == false) return
// 触发时把开关赋值false 防止连续触发 *关键点！*
flag = false
// 利用事件委托 打印出事件源输入值
console.log(`${e.target.value}`)
// 利用定时器 间隔一秒结束后将开关变量 重新赋值为true *关键点*
// 从而达到节流 控制函数程序执行
setInterval(() => {
flag = true
}, 1000);
}
})(true)
</script>
</body>
-
函数的防抖：控制事件的触发先进行的结束后再执行下一次事件、
<body> <input type="text"> <script> let inp = document.querySelector('input') // 事件绑定 自调用函数 timer = 0 inp.oninput = (function(timer){ return function(){ //事件触发前 先清除上一次的计时器 clearInterval(timer) //使用计时器来配合触发 300毫秒后执行 timer = setTimeout(() => { console.log(`搜素的内容：${this.value}`) }, 300); } })(0) </script>输入顺序：123 123456 123456789 从而达到防抖 不会一直不节制的触发
