节流器:对重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作,以提高性能。
var extend = function (target,source) {
for(var property in source){
target[property] = source[property];
}
return target;
}
var throttle = function(){
//获取第一个参数
var isClear = arguments[0],fn;
//如果第一个参数是boolean类型那么第一个参数则是表示是否清除计时器
if(typeof isClear === 'boolean'){
//第二个参数则为函数
fn = arguments[1];
//函数的计时器句柄存在,则清除该计时器
fn.__throttleID && clearTimeout(fn.__throttleID);
//通过计时器延迟函数的执行
}else{
//第一个参数为函数
fn = isClear;
//第二个参数为函数执行时的参数
param = arguments[1];
//对执行时的参数适配默认值,这里我们用到以前学过的extend方法
var p = extend({
context :null,//作用域
args : [],//相关参数
time :300,//延迟执行的时间
},param);
//清除执行函数计时器句柄
arguments.callee(true,fn);
//延迟执行函数
fn.__throttleID = setTimeout(function() {
//执行函数
fn.apply(p.context, p.args);
}, p.time);
}
}
使用:
//首先音符jquery.js与easing.js方便返回顶部动画实现
function moveScroll(){
var top = $(document).scrollTop();
$('#back').animate({top:top+300},400,'easeOutCubic')
}
//监听页面滚动条事件
$(window).on('scroll',function(){
//节流执行返回顶部按钮动画
throttle(moveScroll);
})