防抖动
其核心内涵在于延迟处理,也就是将一系列的事件处理程序全部延迟,保障推送进来的第一次事件处理
var debounce = function(fn,delay,mustRunDelay){
var timer = null;
var t_start;
return function(){
var context = this;
var args = arguments;
var t_curr = +new Date();
clearTimeout(timer);
if(!t_start){
t_start = t_curr;
}
if(t_curr - t_start >= mustRunDelay) {
fn.apply(context,args);
t_start = t_curr
} else {
timer = setTimeout(function(){
fn.apply(context,args);
},delay);
}
}
}
使用方法
window.onresize = debounce(resizeDiv,50,100);
//onresize为事件发生对象
//resizeDiv为要执行的函数
//50为定时器的函数
//1000多长时间需要执行一次
函数节流
节流函数允许一个函数在规定的时间内只执行一次。
它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数。
$(document).ready(function(){
$(document).on('scroll', _.throttle(function(){
check_if_needs_more_content();
}, 300));
function check_if_needs_more_content() {
pixelsFromWindowBottomToBottom = 0 + $(document).height() - $(window).scrollTop() -$(window).height();
if (pixelsFromWindowBottomToBottom < 200){
// Here it would go an ajax request
$('body').append($('.item').clone());
}
}
});
这是一个节流阀的案例
、
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。