节流和防抖
js是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
而频繁的操作会影响性能，所以有了节流和防抖
防抖
案例
在input搜索内容 haha
那么每输入一个字母就向发送一次请求，一共会发送4次请求
防抖可以解决上述问题
监听某个时间段，没有再次触发，才发送请求(需要setTimeout解决)
function debounce(fn, delay) {
var timer = null;
return function() {
if (timer) clearTimeout(timer);
timer = setTimeout(function() {
fn();
}, delay);
}
}
//优化一下
function debounce(fn, delay) {
var timer = null;
return function() {
if (timer) clearTimeout(timer);
// 获取this和argument
var _this = this;
var _arguments = arguments;
timer = setTimeout(function() {
// 在执行时，通过apply来使用_this和_arguments
fn.apply(_this, _arguments);
}, delay);
}
}
节流
某个时间内，只触发一次事件
1 监听页面的滚动事件；
2 鼠标移动事件；
3 用户频繁点击按钮操作；
4 游戏中的一些设计；
//第一次会触发
function throttle(fn, interval) {
var last = 0;
return function() {
// this和argument
var _this = this;
var _arguments = arguments;
var now = new Date().getTime();
if (now - last > interval) {
fn.apply(_this, _arguments);
last = now;
}
}
}
可以直接使用第三方
lodashhttps://www.lodashjs.com/
_.debounce(func, [wait=0], [options={}])
_.throttle(func, [wait=0], [options={}])
underscorehttp://underscorejs.org/
var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);
