上次我大致的分享了对高阶函数的理解,那这次我就分享高阶函数的应用吧~~
记录一下开发过程当中高阶函数的应用。
1、函数柯里化
什么是函数柯里化?我把函数柯里化理解成是一个将多参函数转化成一个单参的函数。什么意思呢?就是函数首先会接收一个参数,接收了一个参数之后并不会立即求值而是继续返回另一个函数,那么刚刚传入的一个参数在函数形成的闭包中被保存起来,待到函数真正执行求值的时候,那么之前传过的参数都会被一次性用于求值。
接下来看一个简单的例子:
function curry(num){
return function(arg){
return num>arg;
}
}
var bool=curry(10)(100);
console.log(bool); //false
上面的例子就是一个函数柯里化的运用;参数10 是num;参数100是arg。
2、节流函数和防抖函数
js函数大部分都是用户主动调用的,节流和防抖都是为了避免在短时间内频繁触发一些函数而做的前端性能上的优化方案。那么什么是节流呢?什么是防抖呢?其实在本质上他们都是应用全局函数setTimeout来解决的。
节流的原理:将即将被执行的函数用setTimeout延迟一段时间执行。如果该次延迟执行还没有完成,则忽略接下来调用该函数的请求。代码实现如下:
var throttle=function(fn,interval){
var _self=fn,
timer,
firstTime = true; //该值取决于是否第一次调用
return function(){
var args=arguments,
_me=this;
if(firstTime){ //如果第一次需要调用,不需要延迟
_self.apply(_me,arguments);
firstTime=false;
}
if(timer){ //如果定时器还在,说明前一次延迟还没完成;
return ;
}
timer=setTimeout(function(){ //延迟一段时间再执行
clearTimeout(timer);
timer=null;
_self.apply(_me,args)
},interval||500)
}
};
防抖原理:函数在一定的时间后执行,但是在这一定的时间之前函数再次被触发,那么重新开始计时,函数实际上并没有执行。代码实现如下:
var debounce=function(fn,interval){
var _self=fn,
_me=this,
timer=null;
return function(){
var args=argument;
if(timer) clearTimeout(timer); //如果timer有值,重新计时
timer=setTimeout(function(){
_self.apply(_me,args);
},interval||500)
}
},
3、分时函数
js某些函数的确是用户自己调用的,但因为一些原因,这些函数也会严重影响页面的性能。比如在短时间内往页面插入大量添加DOM节点,这样会让浏览器吃不消,也许会看到卡死和假死的情况。那么这时候我们为何不想着分时插入呢,换句话说就是分批插入DOM元素,比如1s要创建1000个节点,改为每隔200ms创建8个。
想想全局函数setInterval,setInterval是每隔几秒执行一次函数。代码如下:
var timeChunk=function(ary,fn,count){
var obj,t;
var len=ary.length;
var start=function(){ //每隔几秒要执行的函数
for(var i=0;i<Math.min(count || 1,ary.length);i++){
var obj=ary.shift(); //获取数组的首位;数组的长度发生改变
fn(obj) //fn是传入的函数,用来做具体的业务
}
};
return function(){
t=setInterval(function(){
if(ary.length===0){ //如果长度为0,清除
return clearInterval(t);
}
start()
},200)
}
}
分时的函数如要用到业务当中,一定要先确认一个具体的条件用来清除定时器,再者,要封装好自己的业务代码fn。要理清要分批做什么,这件事一定要清楚。
当然还有其他应用,比如惰性加载函数的应用,下一次再分享啦~~