前端›js

元素移动的小问题

huan_kong

217字小于1分钟

前端js

2023-02-23

遇到的问题

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

解决方法

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

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)

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