如何解决js中onkeydown事件中连按按键的卡顿现象

最新推荐文章于 2022-11-21 17:36:58 发布
最新推荐文章于 2022-11-21 17:36:58 发布
阅读量1k 收藏
点赞数
分类专栏： javascript实例 
<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <title>test</title>
   <style type="text/css">
      #div1 {
         width: 100px;
         height: 100px;
         background: #ccc;
         position: absolute;;

      }
   </style>

</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    var left = false;
    var right =false;
    var up = false;
    var dw = false;
    setInterval( function(){
        if (left){
            console.log(oDiv)
            oDiv.style.left = oDiv.offsetLeft-5+'px';
        }
        else if (up) {
            oDiv.style.top = oDiv.offsetTop-5+'px';
        }
        else if (right) {
            console.log(oDiv);
            oDiv.style.left = oDiv.offsetLeft+5+'px';

        }
        else if (dw) {
            oDiv.style.top = oDiv.offsetTop+10+'px';
        }
    },100)

    document.οnkeydοwn=function (ev){
        var ev = ev || event;
        var  code= ev.keyCode;
        switch (code) {
            case 37:
                left = true;
                break;
            case 38:
                up = true;
                break;
            case 39:
                right = true;
                break;
            case 40:
                dw = true;
                break;
        }
    }

    document.onkeyup =function(ev){
        var ev = ev || event;
        var code = ev.keyCode;
        switch (code) {
            case 37:
                left = false;
                break;
            case 38:
                up = false;
                break;
            case 39:
                right = false;
                break;
            case 40:
                dw = false;
                break;
        }

    }

</script>
</body>
</html>
yang295242361
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解决js 在onkeydown事件按键停顿问题
默克之蓝
09-16 766
今天在做html5的canvas版坦克大战时发现了这个问题，如果按下方向键不松手，坦克并不会平滑的移动，而是明显的卡顿一下再移动。 解决方法是使用定时器。这里不用canvas了，用个div来演示一下。 test var a = 0, //向左 b = 0;//向右 window.onload = function
js onmousewheel事件多次触发问题解决方法
10-25
做一个首屏和第二屏之间滚动鼠标滚轮就可以整平切换的效果，遇到了很多问题，下面是问题解决方法
JS之onkeydown事件中连按按键的卡顿现象
Learning_echo
08-08 1747
如果你连续按键盘上的某个键，你会发现最开始会出现卡顿现象，那么如果我们不希望它出现卡顿，该如何解决呢？ 下面就是解决办法： 这是我的html+css代码，TeachCdsn是我写的js文件，因为放在一起，截图截不下，所以单独放在一个文件里了： 这是我的TeachCdsn.js代码（因为只是做示例，所以只写了向左和向右移动两个功能）：   ...
js解决onkeydown长按按键卡顿一下
等一个晴天
09-09 4806
据说造成卡顿的原因是window系统为了照顾手不利索的人实现的功能，网页上做动画，连续按键刚开始会卡顿一下，会感觉动画不流畅，解决方案如下代码 解决onkeydown卡顿问题 #div1{ height: 100px; width: 100px; background-color: red; position: ab
Winform下KeyDown，KeyPress，KeyUp事件的总结
weixin_34375251的博客
09-15 485
在winform程序中，经常会用到这几个事件用于控制数字输入，按键动作等操作，但一直没有完全弄清楚他们之间的区别和联系，到底什么时候用哪一个事件合适，闲暇无事，做了一个小小的总结，以免以后犯糊涂。 1） 这三个事件调用的先后顺序（MSDN）      1. KeyDown    ：在控件有焦点的情况下按下键时发生      2. KeyPress   ：在控件有焦点的情况下按下键时发生。 ...
C#_C++_SDK_WM_KEYDOWN人物卡顿延迟解决方法
ddz777751的博客
07-01 188
提问者采纳 由Keydown和keyup事件组合，keyDown来判定按下，此时开始移动，KeyUp判定松开，这样可行否？ 追问 这是我一开始的写法，但就是因为 键盘重复延迟 导致keydown后会有一下停顿 回答 我的意思是有一个在keydown事件中有一个bool量判定是否按下了某个键，比如W，之后作为这类程序应该始终有个线程循环检测按键与画面结果显示（或渲染），最...
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
10-25
JavaScript中的`onkeydown`事件是用于监听用户按下键盘上的任意按键。这个事件在键盘按键被按下时触发，不论按键是否产生了字符。与`onkeypress`事件不同，`onkeypress`只在用户按下产生字符的键时触发，比如字母、...
ASP.Net中防止刷新自动触发事件的解决方案
10-31
需要在ASP.NET页面中放置一个隐藏的Button控件，该控件的ID应与JavaScript中调用的ID相匹配。由于这个按钮只是为了捕获事件而存在，因此可以将其样式设置为不可见。 ```xml ; LEFT:344px; POSITION:absolute; ...
onkeydown事件解决按回车键直接提交数据的需求
12-01
查找文档如下 onkeydown 事件会在用户按下一个键盘按键时发生。 语法：onkeydown=”SomeJavaScriptCode” 支持该事件的html标签; 代码如下: , , , <area>, , , , , <body>, <button>, , , , , , ...
JavaScript 中的事件教程
10-30
### JavaScript中的事件教程 #### 一、事件的概念与作用 在Web开发中，**事件**是一种用户或浏览器的行为，它可以触发JavaScript代码的执行。通过利用事件，开发者能够创建交互式的网页，实现动态效果和响应用户...
如何使keyup事件延迟处理
一路走一路看，一边哭一边笑
09-14 5144
一般情况是每点击一个按键都会触发一次keyup事件，但是有些时候，这样并不能满足要求，需要的是输入完毕之后才执行某函数。（比如通过扫码枪扫描图书条形码进行图书信息的录入）这里只能采取延时执行的方法来处理这种情况，具体代码如下：<script type="text/javascript"> $(document).ready(function() { $("#i
Vue-element中el-input输入卡顿问题
年少青山的博客
08-30 8595
最近使用Vue-element时，遇到了el-input输入卡顿问题，影响用户体验，如下 el-input是这样写的，没有加额外的事件 <el-input v-model="code" placeholder="code" type="textarea" :rows="1"/> 解决方法 使用.lazy修饰符 使用.lazy的修饰符可以取消v-model的双向绑定，避免输入改变增加队列造成卡顿 注意：el-input底层代码会将文本框用div包裹， 所以直接在el-input中使
Vue大型表单数据导致el-input输入卡顿解决方案
热门推荐
cindy647的博客
03-05 1万+
Vue大型表单数据导致el-input输入卡顿解决方案 说明 在我们的日常开发中，可能会遇到一个大型的表单页面包含非常多个el-select及el-input组件的情况。如： 对于这样大型的表单数据，尤其一些下拉选项非常多甚至还要从接口获取时，会容易出现两个问题： 1、el-select组件操作卡顿 2、el-input组件输入延迟卡顿，即在输入框里输入、删除一些字符，会有明显的延迟 对于第一个问题，网上有很多解决办法，通常是：下拉数据动态获取、减少数据量 此处主要讲第二个问题的解决方案： 问题的出现 大
VUE使用document.onkeydown键盘的监听与移除
MtangEr的博客
12-28 8409
在项目中 偶尔会使用到监听键盘事件，当只写了调用键盘事件时，切换到其他页面的时候，发现仍会触发键盘事件，如果需求时不需要全局监听的话，就需要写一个 取消键盘监听事件 //取消键盘监听事件 document.onkeydown = null 实例： 在这里插入代码片 mounted(){ this.keyDown() // 监听键盘 }, destroyed(){ //取消键盘监听事件 document.onkeydown =
[element-ui] el-table el-input 输入框卡顿
qq_14993591的博客
11-21 1901
用el-table配合el-input直接渲染可编辑行，在数据量大的情况下，会出现输入卡顿的问题。
Element输入框iput输入卡顿问题
weixin_52394634的博客
10-28 2984
解决input卡顿
js-使用定时器，解决键盘控制div移动过程第一下的卡顿问题
weixin_47295886的博客
10-27 317
onkeydown：鼠标按下同时控制方向和速度：不行 出现卡顿。鼠标按键——输出方向 和速度。让方向和速度分别被其他控制。开启定时器——控制方向。
js中长按键盘 出现卡顿
wobuhui123的博客
05-31 206
系统性的原因非bug可以换个思路解决来源
解决js中onkeydown事件键盘控制div移动鼠标卡顿
yCharlee的博客
07-10 3555
当在键盘上按下按键之后，div移动会卡顿一下，然后再继续持续移动。原因是系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间，键盘在第一次keydown后，不能连续触发onkeydown，因为没有keyup,所以需要一个间隔来判断是连按。 当然可以快速的按键，这样就不会卡了，但是用户一般都不会这样做。所以为了避免在制作动画的时候，给用户产生动画不流畅的感觉。解决方案是设置一个定时器：先开一
js中onkeydown用法
最新发布
05-19
`onkeydown` 是 JavaScript 中的一个事件属性，用于在按下键盘上的键时触发相应的事件处理函数。 使用 `onkeydown` 的基本语法如下： ```javascript element.onkeydown = function(event) { // 处理按键事件的代码 }; ``` 其中，`element` 表示需要绑定事件的元素，如 `document`、`window` 或页面中的某个具体元素。`event` 是一个事件对象，包含了有关按键事件的详细信息，如按下的键的键码、键名等。 下面是一个示例： ```javascript document.onkeydown = function(event) { if (event.keyCode === 13) { // keyCode 为 13 表示回车键 console.log('您按下了回车键'); } }; ``` 在上面的示例中，我们绑定了 `document` 的 `onkeydown` 事件，并在事件处理函数中判断按下的键是否为回车键。如果是回车键，则打印一条消息到控制台。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值