1、节流函数 当持续触发事件时,保证隔间时间触发一次事件。
应用场景:处理点击事件,每隔delay时间再次调起点击的真正实现方法,例如调ajax调接口,避免频繁点击对接口的压力;
var last_time = 0;
function Throttle(fn,delay) {
var args = [].slice.call(arguments);
var now_time = (new Date()).getTime();
if (now_time - last_time > delay) {
fn.apply(this,args);
last_time = now_time;
}
}
2、防抖函数 即 非立即执行
触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间;
应用场景 input框模糊搜索的时候 不需要键盘抬起就去发起搜索请求 而是在键盘抬起后的wait时间后再发起模糊搜索;
const debounce =(func, wait, ...args) =>{
let timeout;
return function(){
constcontext = this;
if( timeout ) clearTimeout(timeout);
timeout = setTimeout( ()=> {
func.apply(context, args)
},wait);
}
}
3、函数重载
通过arguments检测并遍历参数
应用场景:当merge传入n个参数的时候,我们需要把这些参数整合到一起;
function merge(root){
for(var i = 1;i<arguments.length;i++){
for(var key in arguments[i]){
root[key] = arguments[i][key] ;
}
}
return root;
}
var merge = merge( { name:'张三' },{ age:20 },{ sex:'男' } );
console.log(merge) / { name:'张三', age:20, sex:'男' }
未完待续。。。
网友评论