解决js key中的时间间隔

之前在做js通过上下左右建控制div的移动时,会发现在切换key的时候,会有时间间隔

原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间

解决方案一:

先开一个定时器,让div一直处于(往4个方向)准备移动的状态(初始4个方向的值都是false,div就保持在原地不动),当按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动,松开方向键,这个方向的值就改变为false , div就停止这个方向移动了。

我曹,居然这样做,那我们的timer一直除以监听的状态中(有种重复死循环的感觉),感觉,性能消耗比较大滴呀;

var timer = null;

    var left = false;

    var right = false;

    var top = false;

    var bottom = false;

    setInterval(function(){

        if(left){

            oDiv.style.left = oDiv.offsetLeft-10+"px";

        }else if(top){

            oDiv.style.top = oDiv.offsetTop-10+"px";

        }else if(right){

            oDiv.style.left = oDiv.offsetLeft+10+"px";

        }else if(bottom){

            oDiv.style.top = oDiv.offsetTop+10+"px";

        }

    },50);

    document.onkeydown = function(ev){

        var ev = ev || event;

        var keyCode = ev.keyCode;

        switch(keyCode){

           case 37: left = true;break;

           case 38: top = true;break;

           case 39: right = true;break;

           case 40: bottom = true;break;

        }

    }

    document.onkeyup = function(ev){

        var ev = ev || event;

        var keyCode = ev.keyCode;

        switch(keyCode){

           case 37: left = false;break;

           case 38: top = false;break;

           case 39: right = false;break;

           case 40: bottom = false;break;

        }

    }

}
时间: 2024-12-14 19:34:40

解决js key中的时间间隔的相关文章

解决js代码中加入alert()就成功执行,不加就不对的问题!

问题: jquery中的$(document).ready(function(){})中调用两个方法(1)利用ajax请求去后台查图书类别的方法(2)当页面上利用图书类别去查询图书返回页面,让图书类别回显的方法.在(2)方法中如果加alert()能正常执行,去掉alert()不能正常执行的问题. 解决源码 1 <script type="text/javascript"> 2 //复核查询 3 function seachSysBook(){ 4 //从下拉框获取图书类别

用闭包解决 js 循环中函数变量暂存问题

需求:有一个数组,根据数组的值渲染对应的数字div,单击对应的div 在控制台打印对应的数字.如点击1,控制台打印1. 问题: 不管点击哪个值 打出来都是4 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>testFor</title> </head> <body> &l

使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题

1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我们来一起看一段代码: // 作为对象方法调用 var test = { a : 5, b : 6, sum : function () { return this.a + this.b; // 此处this = test } } alert(test.sum()); // 11 作为对象调用时thi

promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的通知机制. 异步:当事情处理完成后被请求者会发信息通知请求者该事情处理完成.在这期间被请求者可以选择是继续等待命令请求完成还是去做其他事等待被请求者返回. 同步:当事情处理完成后被请求者不会告知请求者,等到请求者发来询问是才会告知 阻塞:非阻塞 指的是请求者 阻塞:针对请求者来说的,委托其他人处理一

js文件中的中文提示信息发到jsp中出现乱码解决步骤

.js文件创建默认是gbk编码,该js文件中如果有中文,在utf-8的jsp页面中,显示改中文,为乱码! 解决方法: 1--将原来.js文件中的内容全部复制到剪贴板中: 2--修改js文件的编码格式为utf-8: 3--将剪贴板中的内容黏贴到原来的js文件覆盖原有内容,保存,再测试就没有问题了.

JS文件中的中文在网页引用时显示乱码的简单解决方式

今天把一个jquery方法从前台cshtml文件转移到单独的js文件中后执行不成功,调试发现if判断中的中文字符串变成了乱码,之前在前台文件中是可以正常显示的,所以判定可能是跟文件的编码方式有关系. 搜索网络得知在引用时指定编码方式charset即可解决,此方法已验证: <script type="text/javascript" language="javascript" src="scripts/xxx.js" charset=&quo

解决webkit浏览器中js方法中使用window.event提示未定义的问题

这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的形式传入(后文会详说). function myfunc(param){ alert(window.event); } //ie中 <input type="button" onclick="myfunc('testie')" > //一切正常 //webk

vs 2012 调试不了js -- solution 中script document显示不出来

背景: 因为项目的需要,从ie8升级到ie11(并且自动更新安装了几个ie11的补丁),升级后想用vs2012 调试asp.net项目中的js 但是发现solution中script document项目没有在项目中运行时启动,js不能打断点(***的空心圈). 解决过程: 这个同组的同事以前遇到过,并且解决了,所以向他请教,无果,不知道怎么解决的... 搜索了一下不能打断点的提示信息,网上给的说法是高级设置ie中禁掉第三方的调试工具选项前面的勾去掉,无果:这个和我的问题没有关系. 之前有同事更

js oop中的三种继承方法

JS OOP 中的三种继承方法: 很多读者关于js opp的继承比较模糊,本文总结了oop中的三种继承方法,以助于读者进行区分. <继承使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方法.(继承的两方,发生在两个类之间)> 一.通过object实现继承 1:定义父类 function Parent(){} 2:定义子类 funtion Son(){} 3:通过原型给Object对象添加一个扩展方法. Object.prototype.customExtend = function(p