解决js 在onkeydown事件按键停顿问题

最新推荐文章于 2022-05-22 11:01:33 发布

shoujixx123

最新推荐文章于 2022-05-22 11:01:33 发布

阅读量778

点赞数

本文链接：https://blog.csdn.net/shoujixx123/article/details/48499191

版权

今天在做html5的canvas版坦克大战时发现了这个问题，如果按下方向键不松手，坦克并不会平滑的移动，而是明显的卡顿一下再移动。

解决方法是使用定时器。这里不用canvas了，用个div来演示一下。

<html>
<head>
    <meta charset="utf-8" />
    <title>test</title>
    <script>
        var a = 0, //向左
        b = 0;//向右
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var timer = null;
            document.onkeydown = function (ev) {
                var oEvent = ev || event;
                if (oEvent.keyCode == 37) {
                    if (a == 0) {
                        timer = setInterval(function () {
                            a = 1;
                            oDiv.style.left = oDiv.offsetLeft - 10 + "px";
                        }, 40);
                    }
                }
                else if (oEvent.keyCode == 39) {
                    if (b == 0) {
                        timer = setInterval(function () {
                            b = 2;
                            oDiv.style.left = oDiv.offsetLeft + 10 + "px";
                        }, 40);
                    }
                }
            };
            document.onkeyup = function () {
                a = 0; b = 0;
                clearInterval(timer);
            }
        }
    </script>
</head>
<body>
    <div id="div1" style="position: absolute;">ddddddddddd</div>
</body>
</html>