129.尚硅谷_JS基础_修改div移动练习

嗯，呃，回过头来看昨天那个练习啊，昨天我们说的这个移动div这个练习，嗯，这个练习呢，其实功能已经实现了是吧，但是就是唯独一个就是说当我们摁着一个键不放的时候，它这个第一次和第二次移动之间，它会卡顿一下，对吧？哎，卡顿一下，那我们现在希望的什么呀？它运行起来是不是更加的这个更加流畅啊，哎，更加流畅啊，那我们现在来分析一下这个问题在哪啊，问题在哪？那么说了，我们要让一个东西去移动的时候，或者说白了，我们自己去移动的时候，有两个东西是必须要有的，哪两个东西。一个是我的方向对吧，你要移动，你有一个移动的方向，你是向前移，向左移，向右移还是向后移，你得有一个方向，那还有第二个呢，速度啊，方向还有速度，这两个东西是必备的啊，你有一个方向，你说我移动速度是零，那你是不是也不动啊，哎，我移动速度是十，我是不是就动起来了？哎，好，那现在我们说了就是两个样素，一个方向，还有一个是速度，那现在我们来看这那这一块现在什么出问题了，方向有没有问题，诶方向没有问题，出问题的什么速度，速度是不是在这儿卡了一下啊，诶卡了一下，那我们来说为什么会出问题，那现在我们说了，无论是我的方向也好，还是我的速度也好，我是不是都在这个on key down这个事件里去设置了呀，诶设置的啊，所以这块注意我们说了，所有的速度也好，还是这个方向也好，都是在这个on key down里边控制的，而我们什么呢，方向是没有问题的，出问题就是什么呀。

速度啊，速度这些像什么呀，像我们骑自行车一样，骑自行车的时候，我们说我们方向是由什么控制的。由手控制的吧，我说往哪边拐是往哪边拐啊，而速度呢，由脚控制的，我们的速度和方向是分两个两个东西去控制，一个有手控制，一个有脚控制，那这样我们骑自行车是不是还能连续的运行起来啊？好，那现在假设什么呢？你这个手你既要控制方向，又要控制速度。

那是不是就出问题了呀，不撞死就好了，对吧，你可能你这手还摇呢，咔咔咔咔一边摇，然后这还得还得还得拐弯是吧，很有可能就撞汽车上是吧，好像有那种残疾车，好像那种情况是吧，所以他会开的，它会很慢很慢的，所以这块注意呢，我们的问题就是什么呀，现在我们这个on k档事件，它是同时控制速度又控制。方向啊，又是控制方向的，那现在干嘛呢？我们说了它控制方向是没问题的，那现在我们就想想，那我能不能找一个别的东西去控制这个。速度呢，能不能呢，来，那在这我们来直接写了啊，直接写了我来在这干嘛呢？诶我在这儿开启一个这个定时器来干嘛呢？来控制我们这个div的一个移动，注意这个定时器只控制它的移动，而不管什么呀，方向啊，我只控制移动，那看我怎么写，非常简单，来什么呢？Set一个interval，然后呢，我这来一个function，然后一个括号，这里边来个时间叫一个30，是不是表示30毫秒啊，也就是说现在我们这个函数它会每隔30毫秒去。

调用一次吧，然后看我怎么改啊，来，我把这个Switch，这堆东西Switch啊，别选差了，Switch这堆东西CTRLX原封不动的放到这个inel里边，诶那现在我们来说了，现在我把这Switch放到这函数里，也就是说我这函数每执行一次是要对这个死位是进行一个这个判断呀，诶进行个判断，然后不要忘了还有一个死P的，我给它干嘛呀，提出来，不然在那是不是看不见这个速度，诶把这速度给它提取出来，CTRLX咱们来看速度提取出来以后再看一个问题，这改完了我们再看啊，现在还有什么问题，现在我这个一问点t code的，我这有没有event呀，没有，所以我就不写它了，我来什么呢？创建一个变量表示方向，直接来一个Y，一个DR等于零，随便写一个等于零，然后呢，我这所Switch是不写QQ的了，等于什么呢？等于电源，诶，然后我们来看是什么意思啊。

现在我们这个函数会每隔30毫秒执行一次，每执行一次是不是根据D的值来判断执行哪个代码啊，如果D37是不是执行这个代码啊，是不是就往左移动了，39是干嘛呀，往右38往上40是不是就向下呀？哎，那现在我问你，我这运行，你说我这div它动不动，动不动不动，因为电压是什么呀？是零吧，哎，是零，但是这函数执没执行啊，执行了只是没有找到符合条件的那个值吧，好，那现在我们来看这儿啊，我来一个F12，我这改一个，我来电压，电压等于什么呢？电压等于一个，比如说我来一个39，是不是向右移动啊，我直接来一个电压等于39，然后你走。

完了这块还改不了，那我们直接回到我们那个那里边去改啊，回到那边，因为我们这块是在这个函数里设置，所以他看不着啊，我们就这是函数作用语，或者改什么呢？改一个39，现在电压是不是39了呀，39是不是满足这个条件呀，哎，咱们来看啊，一刷新求。完了，它是不是连续向右移动了呀，诶向连续向右移动有没有卡顿，没有卡顿，当我这个值是37的时候，是不是向左呀，我一保存一刷新走，你是直接就跑了呀，也是没有一丝一毫的一个卡顿，来什么呢？来一个这个40。40我们来看40应该是我们这个向下吧，诶向下我这一刷新走你。是不是移动起来了，哎，移动起来了啊，所以现在你会发现什么呢？我通过修改DR是不是可以去修改我们这个整个的一个移动方向啊，那现在我这什么呢？现在我这个set in特，我这个定时器就像什么呢？就像我这个脚一直在使劲的蹬我的这个什么呀，脚蹬的一直在蹬，一直在蹬，也就说我这轱辘干嘛呀，它一直在转，但是他走没走啊，没走，因为我现在需要一个什么呀，需要一个方向，我就等你给我一个方向，你只要给我一个方向，我这个是不是就下去了，那现在你个方向给我零零是不是就不动了，那我会发现什么呢？我可以通过修改电压来干嘛呢？来影响我们这个元素的这个影响我们这个移动的什么呀，移动的这个方向，那问题来了，我电压什么时候改？

是不是到我摁的时候改啊，诶所以在这儿我就概念简单的事，使什么呢？哎，使我们这个DR等于谁呢？我们这什么呀，按键的这个值吧，直接来一个DR等于一个event，点一个k code，那这样什么效果，当我摁左的时候，电压是不是37啊，当我摁右的时候，电压是是39啊，这样摁左是不是就往左走，摁右就往右走了，摁三摁上是不是就往上走，摁下就往下走了呀，因为注意啊，我现在摁方向的时候，我就已经不控制它的速度，而只什么呢？而只是修改。

D2的值吧，诶D2的值我这来看效果啊，一保存咱们来看刷新一下，现在我这摁摁呦。是往右移动了，摁下是往下移动了，还有没有一丝一毫的卡顿了，哎没有了，是不是就很连贯了，哎很连贯了，为什么连贯了，因为什么呀？因为现在我们的按键只控制方向速度它就干嘛了，不控制了啊，速度它就不控制，这块看明白了吗？诶，但是这有一个问题啊，我撒手了，停不下来了吧，应该什么呀。我一松手你是不是就应该不动了，或者这种感觉其实也挺好的是吧？哎，但是我们现在就想我一松手你就不动了，那这玩意儿怎么办怎么办，诶那现在什么问题，我一摁左，我这个值是不是就负值给加上了，那当我松手的时候。

你是不应该就取消了呀，哎，所以这块干嘛呢？来这块当我们这个按键松开始，我们什么呢？我们这个div不在移动，那我就干嘛了，是不是要给doin绑定一个这个on k up事件呀，等于一个function，那这块很简单，On up以后呢，直接让D等于零，或者随便一个什么值，只要不是那几个值就行啊来我们来，诶设置我们这个方向为零啊，D就是一个方向的意思，这回再看效果，一刷新，右移动松手，下移动松手，左移动松手是不是就停了呀？诶这样就可以有这么一个效果了，就没有任何的卡顿了，总体的一个思路就是把我们这个方向和速度分开两个东西控制，只让我们这个什么呀，诶这个on k档去控制方向，而速度呢，通过一个定时器去控制啊，定时器控制好那这块就完成了，诶我们还有一个这个。

加速的功能的是吧，我们来看看啊，摁着CTRL走你还真快是吧？呦呵，完了跟这呢是吧，但是问题来了，我现在已经没摁CTRL了，他是不是还加着速的呀？哎，没摁CTRL他怎么还加速啊，哎，现在我这个死P的是不是变成一个外部的一个变量了呀？诶也就说现在是十，当我按着CTRL的时候是把它变成500了呀，哎，那问题来了，那即使我这松手了，它是不是还是500呀？哎，所以那我这应该干嘛呀，我可以再来一个else，如果你不问C4P的。还干嘛呢，还等于十啊，还等于十，或者说你可以在这什么呀，如果一松手SP的设置为什么呀，十啊，这样一保存一刷新，摁着CTRL走，你走你是不是很快了，诶我这CTRL1松手。

是不就很慢了呀，哎，这么一个效果啊，这么一个效果好，那这个呢，是我们说的这么一个东西啊，通过这个定时器来解决我们这个什么呀，卡顿的一个问题啊，卡顿一个问题，好我们就来停一下。