老师，请问为什么加return才有效果，不加return就没效果？
来源：4-2 CSS动画-命名约定以及测试脚本
super星光
2019-09-19 22:12:10
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语句都会被执行， 结合下图的注释理解
添加return之后， 在满足条件执行if语句，修改对应变量的布尔值，然后退出本次点击事件。 那么下一次点击的时候，就会执行另一个if语句。
举个例子， 就是第一点击的时候，给元素添加init类名， 有一个动画效果，然后retrun就会结束本次点击事件函数， 然后再次点击的时候就会给元素添加done类名哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0 -
好帮手慕慕子
2019-09-20
同学你好， 因为加了return之后， 执行完该条if语句之后，就会退出函数， 不再执行if后面的语句， 如果不加return， 会继续执行后面的语句，所以无法实现效果
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0h019-09-20
相似问题