老师,请问为什么加return才有效果,不加return就没效果?

老师,请问为什么加return才有效果,不加return就没效果?

var screenAnimateElements={

".screen-1":[".screen-1__heading",".screen-1__phone",".screen-1__shadow"]

};

function setScreenAnimate(screenCls){

var screen=document.querySelector(screenCls); //获取当前屏

var animateElements=screenAnimateElements[screenCls]; //需要设置动画的元素

var isSetAnimateClass=false; //检测是否为init属性

var isAnimateDone=false; //检测是否为done属性

screen.onclick=function(){

//为animateElements增加init属性

if(isSetAnimateClass===false){

for(var i=0;i<animateElements.length;i++){

var element=document.querySelector(animateElements[i]);

var baseCls=element.getAttribute("class");

element.setAttribute("class",baseCls+" "+animateElements[i].substr(1)+"_animate_init");

}

isSetAnimateClass=true;

return;

};

//切换animateElements的init为done

if(isAnimateDone===false){

for(var i=0;i<animateElements.length;i++){

var element=document.querySelector(animateElements[i]);

var baseCls=element.getAttribute("class");

element.setAttribute("class",baseCls.replace("_animate_init","_animate_done"));

}

isAnimateDone=true;

return;

};

//切换animateElements的done为init

};

}


setScreenAnimate(".screen-1");


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好, 因为初始设置的isSetAnimateClass和isAnimateDone都是false, 满足点击事件中的if条件, 两条if语句都会被执行, 结合下图的注释理解http://img1.sycdn.imooc.com//climg/5d849cb009ddd6a513790871.jpg

添加return之后, 在满足条件执行if语句,修改对应变量的布尔值,然后退出本次点击事件。 那么下一次点击的时候,就会执行另一个if语句。 

举个例子, 就是第一点击的时候,给元素添加init类名, 有一个动画效果,然后retrun就会结束本次点击事件函数,  然后再次点击的时候就会给元素添加done类名哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~


好帮手慕慕子 2019-09-20 10:24:26

同学你好, 因为加了return之后, 执行完该条if语句之后,就会退出函数, 不再执行if后面的语句, 如果不加return, 会继续执行后面的语句,所以无法实现效果

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

  • 提问者 super星光 #1
    老师,我还是不太明白,if语句不加return的话后面也已经没有其他语句了,可是不加的话效果就没有了,这是为什么?
    2019-09-20 16:33:46
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师