java重复执行函数函数,2-4 JavaStrip自执行函数的作用-惰性函数

惰性函数，从字面是的理解就是懒惰的意思。我们在想象一个场景，我们要实现一个点击就运动的功能，但我们有一个条件，它的浏览器的版本必须要高。

在运动时，首先要判断浏览器的版本，如果够格就执行已经判断过了，如果再次点又得重新判断，从情理上讲，已经不需要再做重复的事情了，但是代码是不懂情理的，当我们点击的时候代码是从头到尾都执行的。

如果我们想实现一个功能，如果第一次点需要判断，后面点就不需要判断了，这个功能我们就叫惰性函数。

我们来写一个判断浏览器兼容的功能:

传统的写法

function addEvent(obj,type,fn){

if(window.addEventListener){

console.log('判断了一次');

obj.addEventListener(type,fn,false);

}

else if(window.attachEvent){

obj.attachEvent('on'+type,fn);

}

}

const btn=document.querySelector("button");

addEvent(btn,'click',function(){});

addEvent(btn,'click',function(){});

addEvent(btn,'click',function(){});

我们发现打印了三次“判断了一次”，这不是我们想要的结果。

我们改一改，用惰性函数来试试。

const addEvent=(function(){

if(window.addEventListener){

console.log('判断了一次');

return function(obj,type,fn){

obj.addEventListener(type,fn,false);

}

}

else if(window.attachEvent){

return function(obj,type,fn){

obj.attachEvent('on'+type,fn);

}

}

})();

const btn=document.querySelector("button");

addEvent(btn,'click',function(){

console.log('点不点');

});

addEvent(btn,'click',function(){

console.log('你点我就点');

});

addEvent(btn,'click',function(){

console.log('好，谁不点谁孙子！');

});

我们发现，我们掉了三次涵数，可只打印了一次“判断了一次”，当我们点击按钮的时候三个监听函数都打印它们回调函数。这是什么原因呢？原因是addEvent是一个自执行函数，首先自己执行一次函数，做了一次判断，然后返回了判断里的函数，当监听函数再调用自执行函数时，其实是调用了返回的函数，而不是addEvent函数。