Question

我想动画我的太空入侵者的腿，但我遇到了settimeout的问题。

// Leg right
invadersContext.fillRect(init_x + pixel*5,init_y + pixel,pixel,pixel);
invadersContext.fillRect(init_x + pixel*5,init_y + pixel*2,pixel,pixel);
setTimeout(function(){invadersContext.fillRect(init_x + pixel*6,init_y + pixel*2,pixel,pixel);}, 3000);
setTimeout(function(){invadersContext.clearRect(init_x + pixel*6,init_y + pixel*2,pixel,pixel);}, 1500);

我不明白为什么动画不会发生。显然我正在以错误的方式使用setTimeout。

有人在乎解释原因吗？

谢谢！

Answer 1

setTimeout等待 n毫秒，然后只运行一次回调函数。您需要使用setInterval代替：

var leftOrRight = "left";

setInterval(function(){
    if(leftOrRight == "left"){
        invadersContext.fillRect(init_x + pixel * 6, init_y + pixel * 2, pixel, pixel);
        leftOrRight = "right";
    }else{
        invadersContext.clearRect(init_x + pixel * 6, init_y + pixel * 2, pixel, pixel);
        leftOrRight = "left";
    }
}, 1000);

小提琴：http://jsfiddle.net/7Ldr8/11/

Answer 2

问题是你的延迟同步，第二个覆盖第一个。而不是同时调用你需要像这样交替：

var draw = true;

setInterval(function() {

    draw ?
        invadersContext.fillRect(init_x + pixel * 6, init_y + pixel * 2, pixel, pixel) :
        invadersContext.clearRect(init_x + pixel * 6, init_y + pixel * 2, pixel, pixel);

    draw = !draw;

}, 1000);

http://jsfiddle.net/385Lr/1/

javascript画布动画与setinterval或settimeout，可靠吗？

2 个答案: