Question

如何在循环中运行一次代码但循环其余代码？我有一个GIF，在按空格键时会改变移动，行走的GIF。但它只运行前3帧然后停止，然后在发布时它变为空闲GIF，这是正确的。这只是步行序列，我猜它是因为它循环代码。任何帮助都会非常感激。

window.addEventListener("keydown", function(event){ 
    if (event.defaultPrevented){
        return; //do nothing if already processed
    }

    while (event.key === " "){
        window.scrollBy(10,0);
        break;
    }

    sprite.src = "images/sprite/walk.gif";

    event.preventDefault(); //cancel default action to prevent it being handled twice.  
})

window.addEventListener("keyup", function(event){
    if (event.defaultPrevented){ 
        return; //do nothing if already processed
    }

    while (event.key === " "){ 
        sprite.src = "images/sprite/idle.gif";
        break; 
    }

    event.preventDefault(); //cancel default action to prevent it being handled twice.
})

因此，简而言之，我想要做的就是想要一些代码在while循环中运行一次。

Answer 1

步行序列的问题，这是因为每次触发事件时都会设置图像，即使图像已经设置好！所以我在分配前添加了检查条件。

以下是轻微修改/改进的代码示例：

HTML：

<img id="imgAnimated" src="http://cdn.osxdaily.com/wp-content/uploads/2013/07/dancing-banana.gif" />

<强> JS：

window.addEventListener("keydown", function(event){

    if (event.defaultPrevented){
        return;
    }

    if (event.key === " " && $("#imgAnimated").attr("src") != "http://i.imgur.com/JfkmXjG.gif"){
        $("#imgAnimated").attr("src", "http://i.imgur.com/JfkmXjG.gif");
    } else return;

    event.stopPropagation();
})

window.addEventListener("keyup", function(event){
    if (event.defaultPrevented){
        return;
    }

    if (event.key === " "){
        $("#imgAnimated").attr("src", "http://cdn.osxdaily.com/wp-content/uploads/2013/07/dancing-banana.gif");
    }

    event.stopPropagation();
})

这是JSFiddle： https://jsfiddle.net/jpmottin/0x937xcw/

如何在while循环中运行一次代码

1 个答案: