133.尚硅谷_JS基础_定时器的应用（三）

已经定义完这个函数了，定义一个目的函数了，它执行一些这个简单动画已经没有什么太大的问题了，但是这里边我们要看看啊，咱们这块写一个东西一定要去多测试一下啊，来来一个一零，来一个定时器三还是来说这个东西啊，这一块创建完了呢，回到这儿来，我们来看看，首先呢，现在还比较简单，那这样啊，我再加一个东西在里边呢，我再加一个来谁呢？来一个BOX2啊，创建两个div位，BOX2呢，我给它设置一个这个样式，直接复制来一个井号BOX2颜色呢，我们换一个这个yellow啊，黄色的，然后现在来看效果，现在应该放心，是不是看不见它呀，诶看不见，那我们来看啊，咱们这个left也是零，它是一个salute，咱们让它干嘛呢？套往下挪一点，来一个这个200个像素保存。啊，我说看不见，为啥看不见呀，运行运行错了是吧，还在运行那个定时器上呢，我们这应该是定时器删了啊，你删了来一打开是不是跟这呢样哎，往下挪2200PS应该跟这，如果你不挪的话，它应该会把这个给它盖着啊，盖着往下挪，现在有两个了，两个以后我要干嘛呢？来在这加一个这个按钮，来一个B填零三，我要干嘛呢？点击按钮以后使BOX2向右移动，诶你说我多了一个按钮BP03，我要做什么效果呢？我1.1它往右移，我一点这个东西干嘛呀？它往友移，是不是一个按钮控制一个元素啊，诶一个按钮控制一个元素啊好，那现在我们来看这怎么写啊，这就非常简单了呀，来来，在这儿我们来写一个，来，先获取我们这个BTN0BT03，直接来一个Y，一个这个BTN03等于一个do的点，一个get。

I IDB天零三，然后呢，B天03.1个on click等于一个function等于function，然后我直接调一个谁呀，呃，Move move我要移动谁呀，移动的是我们BOX2啊BOX2BOX2然后呢，我的这个目标目第二个参数目标目标我就去800速度呢，我来一个十啊来一个十，我这一保存咱们来看现在我一点它是不是BOX2的移动了呀？诶我点第一个是我们BOX1是不是移动啊，诶那现在我一点这两个都可以移动对吧？诶那我干这么一事啊，然后BOX1的速度呢，来一个20是不？BOX1的速度应该比我这个BOX2的速度要。

要快啊，诶快我们来看效果啊，一刷新我这一点，诶它是比较快，而我们这个爆塞它比较。比较慢是吧，诶比较慢，诶他现在两都可以往右移，这还有一个类似于终点线这么一东西是吧，那我可以做个游戏了，做什么呀？诶龟兔赛跑的游戏，诶那我们这红的呢，它跑的比较比较快，那我们假设它是谁呢？它是兔子，哎，它是兔子这黄色跑的比较慢，我们假设他是谁呢？他是乌龟，诶咱们俩咱们看看呀，他们两个谁先到终点，诶那我们说兔子跑得快，我让兔子干嘛呢？还先跑啊，让兔子先跑来走，你兔子跑乌龟走。

诶诶你看哎，确实乌龟赢了是吧，诶这红色的怎么停了呢，我这一点走你。诶红色为啥停了呢？睡觉呢是吧？诶你看这挺灵是吧，一点乌龟跑，诶他是不是就停的就不动弹了呀？诶难道他他听见咱们说把它射成兔子，他就配合咱们一下，他要睡一会觉吗？诶首先我们想想他为什么停了呀，为什么停了，停了肯定只有一个原因，定时器关了，定时器要不关，他说不可能停啊只有一个原因，定时器给它关了，定时器关了那我怎么就关了呢？那现在来看我们这个定时器那个标识我在哪保存呢？诶是不是全局变量开啊，哎所以注意我们来说有个问题，这哥们给我们带来了很多隐患，目前我们的这个定时器，诶定时器的这个标识，诶由什么呢？由我们这个全局变量timer保存，那timer保存。

那他们保存也没什么大问题，但是问题是什么呀？问题是我们说所有的这个执行的那个什么呀？诶定时器，哎，所有诶正在执行的这个定时器都什么呢？都在这个变量中干嘛呢？保存什么意思？那现在来看我1MOVE，我一开始是不是来一个可in特啊，然后开启定时器的时候，我是将定时器那标识是不是赋值给这个timer啊好，那我们来看问题啊，我先点的B天零一，也就是我先让那个BOXS1，我们那个兔子是不是移动啊，它移动干嘛呢？它将它的这个标识给他赋值给谁了，赋值给timer了对吧？哎，给timer了，好兔子跑完了谁跑啊，乌龟跑，诶乌龟后跑的，兔子先跑对吧？乌龟后跑的，它也是调用的木函数，那好了，它一定木函数上来，它先干嘛呢？

可粒桃是关闭定时器啊，但是注意它关的这定时器是谁的呀？是兔子那个吧？哎呀，这就像什么呀？像我们这个乌龟手里这个兔子脖上瞪着一根蛇，乌龟手里攥着兔子那根绳呢，兔子先跑，乌龟跑的时候呢，咔一顿，蛇兔子是不是停那儿了呀？结果乌龟干嘛了？拿冠军了对吧？哎，为什么？就是因为乌龟跑的时候，他把兔子那给他停了，同理，如果你让乌龟先跑。

兔子是不是也给他拽出来，哎，给他拽出来，但是我们说这么设计有没有什么问题，我们这个可粒尔因特尔是干嘛的，是避免在同一个元素上开启多个定时器吧，但是现在我是什么呀，我是为不同的元素上开启多个定时器吧呀，那按理说应该什么呀，你乌龟就应该管你什么呀，管你自己的，你应不应该立管这个兔子这个定时器啊，不应该管吧，哎，不应该管，但是问题来了，现在我们这个定时器，无论是乌龟还是兔子他们使用都都是。同一个那怎么办，那怎么办。那首先这哥们儿肯定他不能要了，对吧？诶肯定不能要了，那你要要他肯定只能是捣乱，那我们需要干嘛呢？你不要你还得干嘛呢，你还有一个地方去保存这个东西，那首先我们需要什么效果，我那个BOX1那个定时器BOX2看见看不见看不见，BOX2的定时器boxs一看不看见，是不是也看不见呀？那我怎么让他看不见呢？那怎么办呀？

诶，我想想，我让乌龟拿着乌龟自己的定时器，兔子拿着兔子自己的定时器，是不是自己拿自己的，然后别人就看不见了，诶那我干嘛呢？诶那我们来看啊，看我怎么做，现在来看我们这是不是一个obj呀，Obj是我们要执行动画那个对象，你给BOX1执行obj就是BOX1，你给BOX2执行obj就是BOX2，看着啊，我不这么写了，我现在是不是timer等于它呀，我改了改成什么呢？OB接点timer，那这是什么效果，我是不是向obj里边添加了一个属性，属性名叫timer值呢？值是它开启定时器那个标识吧，哎，标识，所以这块干嘛呢？我们要向我们这个执行动画的这个对象中干嘛呢？添加一个timer属性用来干嘛呢？用来保存它自己的定时器的一个什么呀标识，那这样如果我是给BOX1执行动画，我是往BOX1里添了一个开门啊，我给BOX2执行是不是给BOX2里添了，那他们还会会不会互相捣乱了。

不会了吧，哎，自己保存自己的，但是你注意你这儿改了，上边这儿是不是也得改啊，下边这儿是不是也得改啊，哎，都改，那这回我们再看他还会不会出现那个情况，保存我这一刷新，咱们这回呢，呃，先让乌龟跑啊，乌龟你不得瑟吗？走，你兔子走。差点是吧，诶差点那兔子是不是还是先中线的对吧？诶先中线的，那这回我们说了他们再执行动画还有没有干扰了，是没有干扰了，哎，因为他们自己去保，保持保存自己的那个定时器，一个动画的执行不会影响到另一个，所以注意啊，你在采取这个保存那个time的时候，一定不要使用这个全局变量，全局变量会有些什么呀隐患，你的动画执行呢，可能会出现一些奇怪的一些现象啊，奇怪的现象好，那这一块呢，我们就给它整完了啊，一定要注意这个time的问题，这块整完了，然后再看我们这还有没有什么可以优化的地方，现在我们这个木执行半天是不是还是只能往左右移啊，这东西是不是又太死刑了，我希望干嘛呀，你可以上下移是吧，还可以左右移，还可以什么呢？还可以变宽，还可以什么呢。

变高呃，说让你可以执行更多各更多种的这种动画效果呀，哎，那咱们这边我们来看第。能看屏幕吧，我们来看怎么去写啊，怎么去写，那这里边啊，我这样我再加一个按钮，加一个按钮呢，我来一个B填零四，我们叫什么呢？叫做一个测试按钮，诶我希望什么呢？我希望我们这个函数可以有更多的一个功能，我这呢复制一下，复制一下这改一个叫做一个BT04，这也叫一个BT04，我们这个测试按钮，但是现在呢，这个按钮我一点呢，毫无疑问也是，诶还没动呢，这ID是不是没改啊，B004啊，我这一点一点是不是也让他动啊，诶那我希望更灵活一点，我希望什么呢？我可以改变它的这个，诶life也可以改变什么呢？改变top还可以改变什么呢外，还可以改变have，诶所有这种值我希望我都可以去直接改，那问题是现在我这是不是已经写死了呀，是不是写死成left了，诶那这样啊，我在这儿呢，我再加一个才是叫做什么呢？At。

啊，什么呀，Attribute属性叫什么呢？要执行动画的样式，看着我在obj后边，我再加一个属性叫做at t啊，我这是不是又多了一个形态呀？诶那我们说了这at tr什么意思呢？诶样修改动画的样式，比如举个例子，我可以传什么呢？比如你可以传life，你可以传套，你可以传life，还可以传什么呢？Has，也就说你传什么，我是不是去改什么呀？哎，你传什么就改什么，所以那你这再执行动画，你就给我传一个参数，这来什么呢？这可能要改的是left，你就传一个left，这要改的也是left，你也传一个left，这也是left，多传left，但是这呢，如果你想改left，诶你就别传left，传什么的外是不是改一宽度啊，你想改什么你就传什么，那问题来了，我仅仅传一个型参，这没有任何意义吧，你这时候得变呀，这还能不能写left写什么呀？At drr吧，哎，你传什么？

那我就获取什么，然后再看还有哪里改。能力容还是。这还能不能写点了？哎，如果你想修改这个top，这应该是top想修改这不应该是呀，这也得改，那我这么写点at tr行不行，行不行，哎，我at tr是个变量吧，所以注意得采取什么呀，哎，中括号这种方式啊，At tr这要什么效果呀，你传Y我就改变外传left，我是不是改变left去看效果啊，看效果现在我一刷新先看上边的。

啊，这还留一逗号是吧，来保存这看一刷新。那还有吗？诶，刚才我改的是哪啊，刚才没改是吗？A tr啊改成AR啊对，这是第一个获取，我应该有两个地方去获取拉了一个对吧？诶拉了一个啊保存我们看效果，这一点移动是不是左啊，因为我第一个传的是一个left，但注意我这个测试按钮，我传的是谁啊吧？诶，我们来看效果啊，我这一点走你。是不是变宽了，哎，变宽了，我一填袜子，它是改变的这个宽度，再看我再传一什么呢，传一个套。

Top是不是改变高度啊，哎，咱们这样啊，我复制一个，咱们留一个，这是我们这宽度，我这传谁呢？传一个top是不是改变高度啊，来我这刷新投你。是不往下走了，哎，往下走了，来再换一个，再来什么呢？来一个这个height he是不是改变我，诶我们这个高度对吧，He啊head t he我已保存，可以刷新走你。是不是长了呀，哎，长了啊，那这样我们说了这个东西是不是就更灵活了呀？哎，你想改什么你就传什么，改top就传top，改west传west改，改这个head船啊，改这个left船，Left想改什么就改什么啊更加的灵活啊，更加灵活好那这块我们看完了，然后呢，再来说一个，诶那这里边呢，我们还可以干嘛呢，还可以再加一个参数，再加一个什么。叫做一个call back叫做一什么呢？回调函数，回调函数是干嘛的呢？我们说传一个回调函数，这个函数什么时候执行呢？将会在我们这个动画执行，哎，完毕以后执行啊，将会在我们的动画执行完毕以后执行，来那看我们这函数到哪动画的执行完毕了。

是不是一在这儿执行完毕了呀，诶所以在这儿来写一个什么呢？诶动画执行完毕来调用我们这个回调函数来什么呢？直接来一个扣back加一个括号数去调用啊，那这个函数会执行几次呀，只会执行一次，也就是我们这个动画执行完毕这次啊完毕这次来我们来看什么效果，那在这儿呢，我来一个。直接来一个木Mo木，我里边传一个什么呢？传一个BOX2 box2，然后来一个这个，咱们来一个YWTH式，然后再来逗号，来一个这个800，再来逗号，来一个什么呀十，但是最后还要来一什么呀，来一个function，这个function什么时候执行，叫做动画执行完毕以后，我来一个alert alert说出一句话叫什么呢？动画执行完毕了，诶我们来看啊，这个函数上来，它会不会执行，我就刷新一点。

咱没执行吧，什么时候出来的，是不动画执行完了才出来呀，哎，就是这么一个效果，同学说了这玩意儿有啥用是吧？我才不关心他执没执行完呢，他注意了，这是个什么呀，函数是吧？是个回调函数，既然是个函数，它就有无限的可能，那怎么无限可能呢？来我们在里边干嘛呢？在函数里我再来一个木木来一什么呢？BOXS2再来一个什么呢？逗号还是这个改一个he h hi，我来什么呢？来一个400，然后逗号来一个是不要忘了这还有一个回调函数啊，先给它写上，我们先不写东西已保存，那现在什么效果？先来执行动画是不是修改这个呀？外执行完了去调这个回调函数，回调函数执行的时候会调用里边这个move，是不是再次修改这个呀，那这回什么效果，我们来看啊，一刷新你这一点走，你先变宽，然后是不再变。

看诶我这就是不是多了一个动画效果呀，你说了我这还一回调函数，我能不能接着往下写啊，诶来我直接复制一个复制进来呢，我还是包括三，我改一什么呢？改一个这个top top改一什么呢？改一个零，让它往上走啊，咱们再看这一刷新走，你再一点先变宽，然后变高，然后往上走。哎，是不是一套效果呀，哎，一套效果，那你说我再复杂一点行不行啊，是不是还可以啊，那你说我再让他干嘛呀，我再让他变回来，来一什么呢？来一个wid PH外，我来什么呢？来一个100，是不是往回变呀？诶，那这是不是又多了一套啊，一刷新再移动，先变宽，然后再变高，再往上移。

是不是在变窄呀，哎，就变成了一套效果，所以注意这个回调函数重不重要，哎非常重要，这回调函数有一什么呀，画龙点睛，那么一个效果可以是不是让我们这个动画效果变得可以无限去扩展了，诶无限去扩展，但是这也有个问题了是么问题的，我一刷新，我一点BOX1，诶咱们看也没啥问题是吧？来F12我们来看一刷新，咱们一执行。哎哟。Back is not function，这为啥呀，我box，我B01，我是不是没有传回到函数啊？诶，没有回到函数只是一个find，把de find当成一函数一调，是不是就报错了，哎，报错了，那所以我这是还必须得传这个回调函数了吧，但是呢，有的时候我需要回调函数，但是有的时候干嘛呀，我不需要，我就不想传了，可是你这还得让我费劲巴拉的传一个函数，这函数里边我什么也不能写，这玩意是不是很麻烦呀？所以我希望什么？如果我回了你你才行，如果我没你是不是就别执行了，那这块怎么办？是不是可以判断一下啊，或者直接什么呀，雨吧，哎，扣back，暗淡的扣back，如果有你才掉，没有你就干嘛了，是不是就不掉了，这样一保存再紧刷新，这回你再看它。

是不是不报错了，哎，那这回呢，你就是想传，哎传不传就都行了啊，传不传都行了啊好，那这块呢，是我们说的这么一个这个目录的函数给它定义完了啊，就给它定义完了一些简单的动画，我们这块都可以去完成了啊，就可以做一些简单效果了，但是这里边你来看啊，还是有点小问题，现在这个目录函数是在我这个定时器三这个页面去定义的，对吧，那我想在其他页面里定使用怎么办？我我是不是还得复制一遍这玩意儿挺麻烦的，但我一想干嘛呢？我能不能给它提取成一个外部文件呀？诶咱们来看看吧，这样我在这儿创建一个这个外部的一个GS文件，在这里边直接新建一个叫做javascript文件，叫什么呢？叫做一个兔TH，诶什么呀，工具啊，工具的的文件创建完了，然后干嘛呢？我把这两段代码。

诶，这个get style也不一要，因为我们需要这个方法啊，需要这个方法把这两个函数直接CTRLX给它干嘛呢？放到这个文件里，现在他们是不是放到一个外部文件里了，保存咱们先看啊，我这个刷新现在一点是不是没用了，因为那个东西没了吧，那想用怎么办？是不是给它引进来呀？诶我们在最上边要用怎么办呢？直接来一个script的标签，Script标签里边有一个src指向我们这个路径是不是行了，一保存这回再看一刷新再一点是不是就没问题了，诶就没问题了啊以后你再想在哪用这个方法直接干嘛，直接把这个tools这个文件引入进去是不是就OK了呀？诶就不用再去写一遍了啊，不用再去写一遍了，那以后呢，我们会把我们些需要用的一些工具方法都往这边放，集中的去管理一下啊，集中管理一下好，那这个函数呢，我们就定义完了啊，我们来评一下。