复习： 手写防抖和节流函数
防抖
定义
当持续触发事件，一定事件内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前 ，又一次触发了事件 ，就重新开始延时。
通俗曰：多次事件触发的时间间隔未超过规定的时间间隔，就永远不会触发该事件。
手写代码
<body>
<input type="text">
</body>
<script>
const debounce = function(func, delay) {
let timer;
return function(args) {
clearInterval(timer)
timer = setTimeout(function(){
func(args)
}, delay)
}
}
const input = document.querySelector(input)
const inputFunc = function(value) {
console.log(`${
value}`);
}
const inputDebounce = debounce(inputFunc, 1000)
input.addEventListener(keyup,function(e) {
inputDebounce(e.target.value)
})
</script>
第一次延时触发后，在延时时间内，又一次触发事件，则将第一次的延时操作清除，重新将第二次的触发事件进行延时。
只有在一次延时操作内，没有再次的事件触发，这次的事件才能被完整触发。
应用
搜索框的联想建议，避免频发发送后台请求。
节流
定义
当持续触发事件的时候，保证一段时间内，只调用一次事件处理函数。
通俗曰：多次事件触发在一个延时时间单位内，只触发多次事件的第一个。
手写代码
<body>
<button id="button">点击</button>
</body>
<script>
function throttle(fun, delay) {
let timerOut;
return function() {
if(!timerOut) {
timerOut = setTimeout(function(){
fun()
timerOut = null
}, delay)
}
}
}
const btn = document.querySelector(#button)
function handle() {
console.log(Math.random());
}
btn.onclick = throttle(handle, 1000)
</script>
在第一次的延时操作时间内，再次触发第二次操作，将不予理会，等到第一次延时时间完毕，第一次事件触发完成，这时再次触发才会有效。
应用
避免频繁提交表单。
区别
通俗曰：
防抖：多次事件触发的间隔时间不超过延时时间，就一直不会触发。
最后一次事件最终触发
节流：一次事件在延时时间内等待触发，其他的事件一直无法触发。
只触发延时操作内，第一个事件。
上一篇：
IDEA上Java项目控制台中文乱码