如图,go是一个递归函数,显示出来的是一个向右运动的动画,但是此时,我有一个需求,就是需要在运动指定时间后,清除setTimeout,结束动画。首先,得想清楚,结束的判断条件是什么,当然,想当然的是使用如图中的L值做判断,满足给定的对L的条件,就结束动画,比如if(L == 100){
clearTimeout(timer)
},但是,我现在不行这样判断,让我们先来研究下setTimeout,看看它的返回值是什么,我在函数中console.log(timer),在浏览器控制台中打印出如图所示信息:
然后我再console.log(typeof timer),打印出如下图所示信息:
可以看出,timer的返回值是number类型的,而且timer的返回值是从0开始递增的,因此,判断条件就有了,就是根据timer的返回值进行判断,比如if(timer == 100){
clearTimeout(timer)
},当timer递增到100时,setTimeout被清除,动画停止,由于我这里的“L”是从“0”开始递增的,所以,对应的此时的left值也是100了,实际工作中,我设想,可以利用timer的返回值做些事情,比如这里,如图
一般情况下,我们如果仅仅是利用递归去增大一个值得话,像这里,就只能去声明一个变量,然后将变量值在每次递归中去增加10,但是有了timer的返回值,就方便了很多,真正这东西有哪些用途,我也还没想到过,相信我慢慢的会找到它的用途的。
回到如何清除setTimeout这里来,在判断是否满足条件后,我们可以用clearTimeout去清除,同时,我们也可以通过将timer值赋值为0来清除,当然有时候也可能会因为需求而将timer赋值为其它值,在这里,当我return false之后,函数就终止了,setTimeout就被清除了,如果没有return false,我们还可以根据timer的值对height产生影响,我还没深入想,待我慢慢找到它的用途吧。
假设我现在把这个动画效果改进下,如图
之前动画是在到达目标值后不会将left值归为0的,但是这个归为0了,也就是动画变成循环的了,我现在有个需求,就是我只想让这个动画来回运动3次,我们可以利用这个timer来做,如图,取得目标值时的timer值
运动三次,在不去显式调整timer的情况下,那就是timer大于600时,停止动画,如图
在循环三次后,就跳出递归了,动画停止