zoukankan      html  css  js  c++  java
  • 解决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;
    
            }
    
        }
    
    }
  • 相关阅读:
    【JZOJ6223】【20190617】互膜
    【JZOJ6225】【20190618】计数
    【JZOJ6226】【20190618】纳什均衡
    【JZOJ6210】【20190612】wsm
    【学习笔记】析合树
    【JZOJ6206】【20190610】二分图边染色
    【loj3123】【CTS2019】重复
    【loj3120】【CTS2019】珍珠
    【loj3119】【CTS2019】随机立方体
    CTS&&APIO2019爆零记
  • 原文地址:https://www.cnblogs.com/mc67/p/6923467.html
Copyright © 2011-2022 走看看