为了解决在开发中一些频繁的事件触发，例如：window.onscroll,window.onresize,mousedown,mousemove,keyup,keydowm等等高频触发的事件 因为 有两种解决方案 :
1. 防抖函数
防抖的原理解析：防抖函数一定等你触发完事件而且在n秒类不再触发才会执行函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p>加入了防抖的input</p>
<input type="text" id='input'/>
</div>
<script type="text/javascript">
//防抖函数
//fn 是需要防抖处理的函数
//delay 是延时时间
function debounce (fn, delay) {
//通过实现闭包缓存一个定时器id，即代码定义的timer
let timer=null;
return (...args) => {
//如果已经定义过setTimeout函数的话就清除当前setTimeout
timer&&window.clearTimeout(timer)
timer = setTimeout(() => {
fn.call(this, ...args)
}, delay)
}
}
function ajax (e,d) {
console.log(`${new Date().toLocaleTimeString()}--${e.target.value}--${d}`)
}
const debounceAjax = debounce(ajax, 500)
document.querySelector('#input').addEventListener('keyup', e => {
debounceAjax(e,'pp')
})
</script>
</body>
</html>
2. 节流函数
原理 ： 如果你持续触发事件，每隔一段时间，只执行一次事件。当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。
var throttle = function(func, delay=300){
var prev = Date.now();
return function(){
var now = Date.now();
if(now-prev>=delay){
func.apply(this,arguments);
prev = Date.now();
}
}
}
window.onscroll=throttle(function(){
console.log(1)
})
