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

啊，刚才咱们正实现了一个功能，我这一点这个按钮呢，它就可以干嘛了，可以一直就向右移动，哎，就太慢了是吧，移动到那个800像素为止啊，那这边啊，我来把它复制一下CTRLCCTRLV，来一个这个零九定时器的第二个东西，我们来接着来说一下，打开它还是CTRL，咱们把这速度啊给它改一下，不然实在太慢了，还是很实，然后呢，咱们在我们这个火狐里进行一下，现在我一点它会持续的去向右移动，对吧，直到移动到这个八本像素这儿停止啊停止，那接下来呢，我们来再整一个，还等于什么功能呢？诶，我再加一个按钮，诶那这个按钮呢，我就麻了，不向右移动了。向左移动，这个呢叫B天零二，什么意思呢？点击按钮以后，这个一点是往往右移，压这个一点你干嘛呀，往往左移啊往左移，那现在来看这栋表怎么写，那既然要B填零二了，我这是先得先得获取BT02啊哎来来这来获取吧，哎获取我们这个BT02，直接挂一个BT02，等于一个document的点一个get element ID来一个BT02，这就OK了呀，诶BT02有了，那这块我怎么整啊。

其实不是跟它应该差不多呀，诶差不多，所以这块呢，我把它给复制1CTRLC咱们在这呢复制一下，诶那我这得改了，这得改什么呀？B填零二，诶点击放C以后向哪啊，向左移动，向左移动lab这干嘛？哎是不是减小啊，哎减小，但是你这么直接复制过来，这么写肯定肯定不行，你这么写完了以后，它是不是还是往右移啊，哎往右移，我得让它向左移，向左移，我们来看它这杆首先呢。这还是left没错吧，左右都是调着left水平方向的，然后这new y6我这还能不能能不能加时了，那加时是不是还是越来越大呀？哎，我得干嘛了，我得减十啊，减去一个十，然后看还哪需要动，诶我那我减十，我这new y6能不能大于800了，那不能大于800了吧？哎，咱们现在干嘛呀，咱们现在来说，我这往右移是往从零是不是往800移动啊，而往左移是干嘛呀，是不是从800往零移动啊，哎，从800向零移动，也就是说我们来说一下，我们这什么呢？我们这儿是从我们这个800向哪呢？向我们这个零移动，那你这一辈子你这减减减一辈子也到不了，到不了800吧，哎，那我怎么办？哎，我是不是得零啊，哎零，那我问你我大于零行不行，是不是得小于零啊，什么意思呀，你最远往左移，最远最远挪哪了，挪到零不能再。

比零小了吧，再比零小就负的是不是就进去了呀，所以注意我们要小于零，那如果小于零怎么办？我说你等于零啊，哎，如果你小于零，我就让你等于零，还有再往后这就不用管了，这时候还这样啊在这儿，那我这等于等于多少等于零啊，哎，等于零，如果像素移动到什么呢？移动到这个零的时候，当元素移动到0PS时候，使其停止动画，这时不就OK了呀？诶来看效果啊，我这一刷新慢慢来向右移动，诶是不是移到800啊来诶向左移动。

是不是移到零啊，哎，向右移动。向左移动向右移动向左移动向右移动向左移动向右移动向左移动是不是就行了呀？哎，可以任意的，它向右还是向左就都OK了，看明白了吧，诶就改了一下，其实没改几个值是吧？但是同学可能看到这儿又觉得有疑问了，这这这我是复制过来的，是你复制过来其实没有几个地方，你改了这玩意是不是有点有点麻烦呀？诶那既然我们说了，那复制复制，那我们可以干嘛呢？让它简单一点，是不是给它提取成一个函数啊，哎，函数，那所以我想干这么一件事干嘛呢？我要尝试，哎创建一个可以执行我们这个简单动画的函数啊简单动画的函数我直接就叫什么呢？Function，我就叫一个这个目吧，动画我们要去移动，做一些移动的效果，然后呢，这函数里我怎么写呢，函数怎么写啊，我先把这一堆啊，咱们不用管它原方不。

我给他。粘过来对吧，哎，原封不动，我给它粘过来，粘过来以后呢，但是这么写呢，肯定是。肯定是不行是吧，哎，肯定是不行，那我们现在来看看哪需要动一下，首先第一个叫做clear Intel一个这个timer，我说要清除上一个动画的这个定时器啊，但是问题来了，现在我这个timer是在我这个window.lo的里吧，诶里边，而我们这一块。它是不是写到我们这个函数外边了呀，所以你这要去写的话，它能混取到这个table吗？没有，所以这里边我们来干嘛呢？把这table也给它提出来，变成一个这个全局的变量啊，全局变量，但是你会发现timer是不是有点多余啊，老是很别扭，但是我们想办法给它处理掉啊，给它处理掉好timer提出来啊，这就不用管了，再来time等于赋值完了，然后呢，O的value等于pass in，这就不用管了，那我们现在来看都基本上都这样了，那我们来看哪需要动一下的，首先说我现在这个动画是给。

BOX1加的对吧，那我以后我可能给BOXS2加，给BOX3加，给BOX100加，这东西是不是定的呀，不是，所以我们是不是需要将它作为参数传进来啊，哎，传进来那我直接直接来什么呢？来一个参数叫一个obj来我们说一下这个参数第一个我们叫做一个obj obj叫什么呢？叫做要执行动画的对象啊要执行动画对象，所以呢，这就不能写BO1了，写这样obj啊写obj来咱们把所有的BOSS1都改成。

不笔记，诶就俩是吧，哎就俩改完就OK了，然后再看还有哪需要动的，诶这十是吧，这十首先我的速度不一定十，有时候我想20对吧，有时候我想30对吧？哎，那我们说这十我是不是应该也传进来呀，那这十我应该叫什么？这这应该算什么呀？是不是速度啊，哎，速度，所以我来什么呢？叫做一个speededed，是不是我们这个SP的呀，SSP的来叫做一个speeded，我们这个SP的叫做什么呢？叫做移动的这个速度，那速度这说完了，我们来说这速度有没有什么问题啊，速度。有正负是吧？哎，那如果是正值我是不是向向右移样，如果负值我是向向左移样，那我问你了，我这减死P的合不合适，是不是加4P的呀？哎，如果你要向向右移，你就给我传一个正数，如果你向左移，你其实我传一个负数，哎，负数，所以咱们这先写一下啊，我们来说一下叫做一个正数，正数是我们这个向右移动啊，向右移动，而我们这个负数呢，是向左移动，是这么一个情况吧，你要来一个正时，我就向右走，你如果来一个负数，我就向向左走，然后这还有一个，这也得小于零，就一个等于零，这零是什么呀。

这零是什么呀？这零是我的目标吧，哎，我这写的零，那我是不是目标是往零这移动啊，我这写的800，我这目标是往800移动吧，哎，所以这是目标，那这目标是不是定的呀，也不是吧，不一定你要往800移动，这就800，你要往零移动就是零，你要往100移动就是什么呀，100，所以这个呢，也应该作为参数，所以呢，我把它放到第二个啊叫做什么呢？TR，这1T叫做一个party，我们这个执行动画的这个目标位置啊标位置，所以再来一个第二个参数，我们来一个这个叫做一个target啊，Target来，那target有了，那我们来看这块我要怎么办吧。

他那我这我小于他，小于他行吗？如果是800我是不是就不行了呀，但是如果是零，我是不是就行了呀？哎，那所以我们说怎么什么时候小于他给的，什么时候小于他给的，哎，如果我们是800的时候，我是往往零移，我是往左移啊，往左移我这个值是不是越来越越来越小啊，越来越小的时候，我是不是最小你就只能是他给的了，是不是就小于他给的，如果我是零干嘛呢？往800移，我这值数不是越来越越来越大了，哎越来越大我应该干嘛了，我是不是要判断它是否大于它力的呀，哎，大于它力的，所以这块注意我们说什么呢？当我们这个向左移动时，需要什么呢？需要判断我们这个new y6是否什么呀，是否小于target给，因为我向左移动，这值是不是越来越小了，那问题来。

好了，那什么时候向左移动啊，哎，如果SP的值是负数，它是不是就向左移动啊，诶那所以这有两个条件什么呢？P的speeded SP的干嘛呢？小于零，同时你的new y6小于它的，我是不是让你这个new y6等于零啊，这能懂吗？哎，然后再来看当什么呢向右移动时，我需要什么呀，需要判断我们这个new y6是否大于它力的，为什么呀，因为我向右移动是零往八百一吧，我这个值是不是越来越越来越大呀，也说你最大是不要大于，不能大于800啊，哎，最大要等于800啊，最大要等于800，那我们说了，那这块我怎么写呀，怎么就向右移动了，是不是死P了。

大于零啊，哎，同时呢，我们这个new y6还在干嘛呀？哎，大于我们这个，哎，Target是我也，我也让你等于零啊，现在我有两个条件，一个是这个条件，一个是这个条件，这两个条件什么关系，是不是或者关系啊？哎，所以这两个条件只要有一个条件满足，我是不是让这个new y6等于零啊，哎，等于零这两个能看懂吧，哎，当然你可以干嘛呀，你可以给它整体套一个括号，但是套不套都行，因为它的优先级比较高啊，与与的预算优先级比较高，你给他套一个这个括号，这样就能看懂了吧，左边一个条件，右边一个条件，只要有一个条件满足了，我是不是让它等于零啊？哎，向左移动我要判断什么呀，是否小于这个目标，向右移动，我要判断是否大于这个目标，只要满足这个，我就让你等于零啊等于零，好，那这整完了再往下看，下边好像就不用动了，是吧，但是这这还能不能等于零了，是不是等于他给零。

哎，等于他给，那这样是不是就OK了呀？哎，这一块稍微逻辑回绕一点，待会你稍微看一下，不难啊，一看就能明白啊，一看就明白，好像在这写完了，这函数好像。等哦对，这是不是应该不能等于零啊，哎，这应该等于target，诶对，这不然就写死了，哎，还是等于target里的啊好，那这一块写完了以后，我们来看看它，哎行不行啊，行不行，来那这我就不用写了，这个是box bt02我直接来什么呢？来一个目Mo目要移动的对象是我们这个什么呀？BOX1要移动的目标是谁呢？目标，诶目标是我们这个零是往。往左移啊，速度呢，我来一个负十是不是OK了呀，哎，这个值，然后上边的呢，我也改一下，都给它关，都给它去掉，都没用了，也是一个木BOX1，不过它的目标是800，值是一个十是不是就对了呀？哎，值是一个十就对了啊来我们这块看看保存来看效果，一刷新走你。

这就动了呀，再来走，你是不是就回来了，哎，这样是不是就OK了呀，那你现在再执行我们这个简单动画，是不是用我这个目函数比刚才那种方式要简单多了吧，哎，要简单多了啊，就是这块啊，但是这里边还有一个地方设计的不太好，哪不太好呢。左右移现在还不是问题，现在我们就要左右移吧，咱们现在先说什么呢？十的问题，这是一个十，这是一个正十，对吧，这是一个负试，也就说正实的时候我是向向右移，复试的时候我是向左移，但是问题来了，也就是说我在执行动画的时候，我们调用方法的人，我要己判断我是向左移还是向右移吧，我要自己去判断，那问题来了，那我得干嘛呀？我得先判断我这个元素现在的位置吧，但是问题又来了，我在执行动画的时候，我知不知道它在哪啊？

我不知道它在哪吧，那我不知道跟哪，我就不能确定我这个值到底应该传十还是传负十，那假设现在我要移动到800，如果我元素现在的位置是什么呢？是1000，我这个值是不是应该就是负十啊？哎，那我现在要移动到800，我的元素位置是是是多少呢？元素位置是600，那我是不是要就传正是啊，那这时候我就不一定了，但我元素的位置不一定是600，不一定是1000码，那怎么办？所以传正负值呢，不好，容易出问题，那所以我们希望什么呢？我们希望我不传，不管正负啊，不管正负，我们我们这个逼呢就是什么呀。就是传正直啊，永远都传正直，所以这里边呢，SP的我们不缺正负，都传正直，那问题来了，你要都传正直呢。

它又出问题了，都传正值在我们这儿是不是永远都是家了，永远都是家了，那你往盈移的时候是不是就移不过去了，那怎么办？诶那我在这个里边，我能不能判断一下死P的这个正负啊？诶我们说判断我们这个速度的这个什么呀？正负值，那我怎么判断呀，我们来说情况，如果我们从零向我们这个800移动则什么呀？死P的是什么？是不是必须得是正值啊？哎，死P的为正因为干嘛呀，你从零往800移，你这个值是不是必须得正值啊，你负值越来越小，是不是永远到不了800啊？哎，这是一个，那么说什么呢？如果什么呢？如果从我们这个800向零移动则什么呀？哎，则死P的干嘛呀，是不是为为负啊？哎，为什么呀，你800往零移是不是值越来越小啊。如果你为。

正你原来来大是不是也是永远到不了零啊，哎，永远到不零，那这块我怎么判断呀，这零和800是谁呀？假如说我从零向800移动，零是谁呀？零是我现在的位置啊，哎，现在位置800是不是我这个目标位置，哎，那我们来看那现在位置我有没有啊，诶我需要在获取一下，其实就是这行代码，我把这个CTRLC复制一下干嘛呢？获取我们元素目前的位置啊，获取用元素目前的位置，注意这个位置我是在单机响应函数，我在这个目函数一上来我就获取的，没有在什么呀，在定时器里获取，因为这个东西我只需要获取一次啊，只需要获取一次，来一个元素目前的位置，我交易什么呢？叫做CT，叫做一个current，也就相当于是不是这个800啊，诶800，那我们说呢，我们是，诶不是是我是零啊相当于零，我们叫什么呢？如果我们current叫做小于我们这个target里can小于小于target里can。

至零，他立的是800，我死去的应该为什么为正直，诶那为正直我管不管他了，不管它了，为正直，我本来就传的正直对吧？那我反过来如果什么呢？如果current大于它里的，那我是不是这值越来越小啊，那我这个s speed应该干嘛是为负值啊，诶所以此时我们这个速度因为负值，因为负值，那我怎么办呀，直接来一个4P的等于一个负4P的是不是就行了呀？哎，这样的好处就是什么呀，我在函数一上来就来判断符号，我传的时候我还用不用考虑正负了，是不是就不用了？哎，咱们来看效果，一刷新移动走你走你走你走你是不是就OK了呀？诶这样我就不用再去考虑这个正负啊，写起来呢更灵活一点啊，所以注意这个正负值呢，也不应该由我们的调用者考虑，而是应该干嘛呀，在我们这个函数内部来考虑啊，在我们函数内部来考虑啊，那这。

这一块我们就给他给他算完了，然后嗯，咱们先停一下吧，先停一下感觉。