解决键盘控制div移动系统延迟问题

博客

一，前言

学js的键盘事件时通常会写一个键盘方向键控制div移动的例子，细心的人就会发现在每次按下键时div会先停顿一下然后再继续运动，这对于追求完美的人来说是致命的痛。其实这是因为存在系统延迟问题，只要用定时器清除延迟就好了。

二，常规写法

先看一下会产生延迟的常规写法：
代码1

三，清除延迟的写法

3.1:描述

用定时器清除延迟不是直接clearTimeout或clearInterval，因为这2个函数需要传入setTimeout或setInterval的ID，也就是说只能先开启定时器，才能关闭定时器。

我们可以先开启定时器，但不让定时器里面的函数执行，这样就达到了初始化的目的，就清除的延迟。至于是选择setTimeout还是setInterval呢？关于两者的区别我会另写一篇文章讲。建议选setInterval，因为它不需要事件触发，可以循环进行。

看一下详细代码：
代码2

3.2：解释

首先把令Left = Top = Right = Bottom = false，使定时器里的函数不执行，然后当按下方向键时，再把它们设为true，激活定时器，这样当方向键一直按着时，div就会按着设定的速度每30毫秒运动10px。当按键松开时，再令Left = Top = Right = Bottom = false，好像是关闭了定时器，但其实只是让定时器里的函数不执行，定时器还存在。这和关闭定时器是有区别的，你不能直接写成clearInterval(timer)，因为这样就彻底把定时器关了，下次再按键时div就不会运动了。

四，后记

注意onkeyup onkeydown是加在window或document这种全局对象上，加在div上则出错。这样div就能流畅地运动了。

最后感谢舒丽琦同学的帮助，她的耐心解答让我搞清楚了这个问题。