JS 防抖动
2018-07-26 本文已影响161人
凌风x
point:闭包 apply call (...param)
/*
防抖动 apply 实现
fnc:需要防抖的函数
param...:函数的参数列表
time:防抖时间
immediate:是否立即执行-- true:第一次有效 之后连续点击无效 直到 最后一次点击开始到防抖时间结束 fnc有效执行
false: 从最后一次点击到防抖时间结束 fnc有效执行
debounce_apply(fnc,param...,time,immediate);
*/
var debounce_apply=(function(){
var timeout;
return function(){
var fnc=arguments[0];
var param=arguments[1];
var time=arguments[2];
var immediate=arguments[3];
if(timeout)clearTimeout(timeout);
console.log(timeout);
if(immediate){//立即执行
//fnc.apply(fnc,param);
var callNow = !timeout;
timeout = setTimeout(()=> {
clearTimeout(timeout);
timeout = null;
console.log("timeout=apply=null");
}, time);
if(callNow){
fnc(...param);
}
}else{
timeout=setTimeout(()=>{
clearTimeout(timeout);
//fnc.apply(fnc,param);
fnc(...param);
timeout=null;
},time);
}
}
})();
/*
防抖动 call 实现
testclick:需要防抖的函数
param:需要对象化的参数列表
time:防抖时间
immediate:是否立即执行
var param={a:1,b:2,c:3}
debounce_call(testclick,param,time,immediate);
1.使用call
1.1
var param={a:1,b:2,c:3};
fangdou2(testclick,param,2000,false);
...
fnc.call(param);
testclick(){
console.log(this.a);
console.log(this.b);
console.log(this.c);
}
1.2
var param={a:1,b:2,c:3};
fangdou2(testclick,param,2000,false);
...
fnc.call(param);
testclick(){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
1.3
var param={a:1,b:2,c:3};
fangdou2(testclick,param,2000,false);
...
fnc.call(fnc,param);
testclick(val){
console.log(val.a);
console.log(val.b);
console.log(val.c);
}
*/
var debounce_call=(function(){
var timeout;
return function(){
var fnc=arguments[0];
var param=arguments[1];
var time=arguments[2];
var immediate=arguments[3];
if(timeout)clearTimeout(timeout);
console.log(timeout);
if(immediate){//立即执行
var callNow = !timeout;
timeout = setTimeout(()=>{
clearTimeout(timeout);
timeout = null;
console.log(" timeout = call=null");
}, time);
if(callNow)
fnc.call(param);
}else{
timeout=setTimeout(()=>{
clearTimeout(timeout);
timeout=null;
fnc.call(param);
},time);
}
}
})();
function testDoudong(flag){
//"a","b","c";
var param0=[{name:'wz'},{age:23},{sex:'male'}];
debounce_apply(testclick,param0,1000,flag);
var param={name:'wz',age:23,sex:'male'}
debounce_call(testclick,param,1000,flag);
}
function testclick(val0,val1,val2){
console.log("===click test===");
console.log(arguments);
console.log(val0);
console.log(val1);
console.log(val2);
console.log(this.name);
console.log(this.age);
console.log(this.sex);
}