函数防抖和函数节流
目标：降低事件的触发频率
频繁触发的事件：
onmousemmove onscroll onkeyup onkeydown window.onresize ...
函数防抖，在事件频繁触发时，只执行最后一次
函数节流，在事件频繁触发时，每隔一段时间执行一次
// 函数防抖
function debounce(delay,fnName){
var timer;
return function (){
clearTimeout(timer);
timer = setTimeout(function (){
fnName();
},delay);
}
}
// 节流（定时器）：
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
// 每次触发都判断一次定时器是否为空
// 只有执行完才为空
if (!timer) {
// 如果为空才会触发，触发完时间恢复空值
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
//处理函数
function handle() {
console.log(Math.random());
}
//事件
window.addEventListener('click', throttle(handle, 1000));
//节流throttle代码（时间戳）
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
// 取现在的时间和触发时时间戳的差值
// 差值达到了目标值才触发
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
//处理函数
function handle() {
console.log(Math.random());
}
//滚动事件
window.addEventListener('scroll', throttle(handle, 1000));
使用场景（看需求）
防抖(debounce)
坐电梯，回城，只执行最后一次
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
节流(throttle)
使用技能，一段时间内执行一次
鼠标不断点击触发，mousedown(单位时间内只触发一次)
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
