元素移动的小问题

huan_kong

2023-02-23

2 min

遇到的问题

比如按下一个按键后需要过一段时间才能连续触发，如果我们需要元素连续移动就会遇到这个问题。

解决方法

先准备好需要的对象，用来存储

let player = {left: false, right: false, up: false, down: false}

创建好监听事件

$("body").keydown(function (e) {
        switch (e.key) {
            case "ArrowLeft":
                player.left = true
                break
            case "ArrowRight":
                player.right = true
                break
            case "ArrowUp":
                player.up = true
                break
            case "ArrowDown":
                player.down = true
                break
        }
    }).keyup(function (e) {
        switch (e.key) {
            case "ArrowLeft":
                player.left = false
                break
            case "ArrowRight":
                player.right = false
                break
            case "ArrowUp":
                player.up = false
                break
            case "ArrowDown":
                player.down = false
                break
        }
    })

然后我们就可以写一个定时器来对div进行移动操作之类的。

setInterval(() => {
  if (player.left) {
    plane.css({
      left: (index, left) => {
        if (parseInt(left) - 2 >= 0) return parseInt(left) - 2
      }
    })
  }
}, 1)

还有别的方向也是以此类推的

遇到的问题
解决方法