JS防抖和节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果
函数防抖
当持续触发事件时，一定时间段内没有触发事件，才会执行一次事件触发函数，如果设定的时间来到之前，又出发了一次事件，就重新开始延时
如下图，持续触发scroll事件，不会触发事件函数，只有当一定时间段内没有触发事件，才会执行一次事件触发函数。
var timer; //undefined
window.onscroll = function(){
//如果当前timer不是空，说明前面有一个等待的请求还未发送，就停止前面的等待
if(timer !== undefined){}
clearTimeout(timer);
};
//再重新开始下一轮等待
timer = setTimerout(function(){
//当200ms内，未发生滚动时，才发送正式的ajax请求
console.log("发送ajax请求，加载更多数据...")
},200);
函数节流
当持续触发事件时，保证一段时间内只执行一次触发函数
<body>
<button id="btn">加载更多<button>
</body>
<script>
var canClick = true; //全局开关变量
btn.onclick=function(){
if(canClick){ //如果当前开关开着说明可以单击
canClick = false; //先关闭开关
//再发请求
console.log("发送ajax请求，加载更多信息...")
setTimeout(function(){
console.log("加载完成")
//在函数的结尾打开开关准备下一次单击
canClick = true;
},2000)
}
}
</script>
