setTimeout и setInterval не работают должным образом

Question

Я не могу заставить это работать, что должно произойти, когда пользователь нажимает пробел, т.е.event.which=32 он движется, но движется на 20 и 20 раз за раз, он не идет 1 к 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);
    });

});

Answer 1

Вы устанавливаете все свои setTimeout одновременно через цикл for.Вам нужно подождать, прежде чем позвонить следующему.

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);
}

Answer 2

Эндрю отвечает, в каком направлении вы хотите идти, я просто положил его в рабочую скрипку и попытался разобраться в этом, так как не мог понять, что именно должен был делать сценарий.

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/