setTimeout和setInterval未按预期工作

setTimeout and setInterval not working as expected

本文关键字：工作 setInterval setTimeout      更新时间：2023-09-26

我似乎无法实现这一点，应该发生的是，当用户按下空格键时，即event.which=32，它确实会移动，但它会向上移动20，并一次移动20，而不是每秒1或1000毫秒

$(function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var x =0;
    var y =100;
    var w =50;
    var h =50;
    var prekey = '';
    ctx.fillStyle = "rgb(200,0,0)";  
    ctx.fillRect (x, y, w, h);
    var i=0; var hi = '';
    $("*").keydown(function(event)  {
        ctx.clearRect (0, 0, 500, 300);
        if (event.which == 37){
            if (x!=0){x=x-1;} prekey=event.which;
        }
        if (event.which == 39){if (x!=450){x=x+1;} prekey=event.which;}
        if (event.which == 32)  {
            if (prekey==39) {
                for(i=0;i<=20;i++) {
                    function jumpBox() {
                        x=x+1;
                        y=y-1;
                        ctx.clearRect (0, 0, 500, 300);
                        ctx.fillRect (x, y, w, h);
                        return 1;
                    }
                    var t = setTimeout(jumpBox, 1000);
                }
            if (prekey==37){}
            }           
        ctx.fillRect (x, y, w, h);
    });
});

您正在通过for循环同时设置所有setTimeout。你需要等一下再打下一个电话。

if (prekey==39) { 
    var count = 0,
    jumpBox;
    jumpBox = function()  {
        x=x+1;
        y=y-1;
        ctx.clearRect (0, 0, 500, 300);
        ctx.fillRect (x, y, w, h);
        if(++count < 20) {
           setTimeout(jumpBox, 1000);
        }    
    }
    var t = setTimeout(jumpBox, 1000);
}

Andrew的答案是你想要的方向，我只是把它放在一个工作的js小提琴里，并试图理解它，因为我不知道脚本应该做什么。

http://jsfiddle.net/mendesjuan/xYUNn/2

以下是新脚本的作用。

  • 点击左右箭头时移动方框
  • 命中空间时启动动画
  • 对其他钥匙不起任何作用

更改您的脚本

  • 为了使动画工作，您需要将setTimeouts链接起来，不能只在循环中调用它们。当你这样做的时候，所有的步骤都会在一秒钟后发生，几乎是瞬间发生的，你不会看到任何动画
  • 不需要运行$('*')，这很浪费，只使用$(document)，因为事件气泡
  • i++比i = i+1更可读，特别是如果您不将其分配给变量
  • 一行中的if非常难以读取
  • 添加了一种在按下另一个键时清除超时的方法

您现在可以根据需要更改脚本

$(function() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var x = 0;
    var y = 100;
    var w = 50;
    var h = 50;
    var prekey = '';
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (x, y, w, h);
    var timeout;
    $(document).keydown(function(event)  {
        var counter = 0;
        clearTimeout(timeout);
        function animateCanvasBox() {
            x++;
            y--;
            ctx.clearRect (0, 0, 500, 300);
            ctx.fillRect (x, y, w, h);
            if (counter < 20) {
                timeout = setTimeout(animateCanvasBox, 100);
            }
            counter++;
        }
        if (event.which == 37){ //left arrow
            if (x != 0){
                x--;
            }
            prekey=event.which;
            ctx.clearRect (0, 0, 500, 300);
            ctx.fillRect (x, y, w, h);
        }
        else if (event.which == 39){ // right-arrow
            if (x != 450){
                x++;
            }
            prekey=event.which;
            ctx.clearRect (0, 0, 500, 300);
            ctx.fillRect (x, y, w, h);
        }
        else if (event.which == 32)  { //space
            animateCanvasBox();
        }
    });
});​

这是一个支持所有箭头的版本http://jsfiddle.net/mendesjuan/xYUNn/5/

相关文章：