0

我正在开发一个石头剪刀布蜥蜴 spock 游戏，我遇到了这个问题：我在显示结果之前调用了一个 setTimeout 事件，因为我想先给它一个加载效果。但是只显示一次，我的结果被多次附加。我试图在 setTimeout 事件之后添加 clearTimeout() 并没有成功。我的代码很长，因为我是编程新手，我想完全了解编码是如何工作的，所以我没有走捷径。而且我也不想只用“你赢了/你输了”来走捷径。您能否查看我的代码并告诉我我做错了什么？
这是小提琴： http: //jsfiddle.net/Daria90/rdLyb79p/48/
下面是javascript代码的一部分

if (gameResult == 'Oh no!Spock vaporized your rock!') {
setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-rock-o""></i>' + '</div>');
    }, 100);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-paper-o""></i>' + '</div>');
    }, 300);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-scissors-o""></i>' + '</div>');
    }, 450);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-lizard-o""></i>' + '</div>');
    }, 550);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-spock-o""></i>' + '</div>');
    }, 700);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-rock-o""></i>' + '</div>');
    }, 850);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-scissors-o""></i>' + '</div>');
    }, 1000);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-spock-o""></i>' + '</div>');
    }, 1150);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-lizard-o""></i>' + '</div>');
    }, 1350);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-paper-o""></i>' + '</div>');
    }, 1550);
     setTimeout(function(){
                var clear =  setTimeout(1850);
                $('#info').append('<h3><span>' + gameResult + '</span></h3>');
                clearTimeout(clear);
            });     
    $('#info h3, #info p').stop().animate({
        opacity: 1
    }, 300);
} else if (gameResult == 'Oh nein! Der Rechner hat deinen Stein <br> mit Papier bedeckt.') {
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-rock-o""></i>' + '</div>');
    }, 100);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-paper-o""></i>' + '</div>');
    }, 300);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-scissors-o""></i>' + '</div>');
    }, 450);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-lizard-o""></i>' + '</div>');
    }, 550);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-spock-o""></i>' + '</div>');
    }, 700);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-rock-o""></i>' + '</div>');
    }, 850);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-scissors-o""></i>' + '</div>');
    }, 1000);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-spock-o""></i>' + '</div>');
    }, 1150);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-lizard-o""></i>' + '</div>');
    }, 1350);
    clearTimeout();
    setTimeout(function () {
        $("#blowupCPU").html('<div class="choice2 ">' + '<i class="fa fa-hand-paper-o""></i>' + '</div>');
    }, 1550);
     setTimeout(function(){
                var clear =  setTimeout(1850);
                $('#info').append('<h3><span>' + gameResult + '</span></h3>');
                clearTimeout(clear);
            });     
    $('#info h3, #info p').stop().animate({
        opacity: 1
    }, 300);
}

非常感谢

4

1 回答 1

2

请将每个分配setTimeout给一个变量，然后使用分配的变量将其清除。

var a = setTimeout( ... );
clearTimeout(a);

逐步调试

$(function () {
  setTimeout(function () {
    $("#entries").html("<p>Welcome, dunce!</p>");
  }, 100);
  setTimeout(function () {
    $("#entries").append("<p>So, you are here!</p>");
  }, 1500);
  setTimeout(function () {
    $("#entries").append("<p>What's the reason you are here?</p>");
  }, 2500);
  setTimeout(function () {
    $("#entries").append("<p>To conquer the world?</p>");
  }, 4000);
  setTimeout(function () {
    $("#entries").append("<p>That's not a good reason!</p>");
  }, 5000);
  setTimeout(function () {
    $("#entries").append("<p>Think and tell me some good reason?</p>");
  }, 6500);
  setTimeout(function () {
    $("#entries").append("<p>Have you finished thinking?</p>");
  }, 10000);
});
* {font-family: Monaco, 'MonacoB2', Consolas, Courier New, monospace; font-size: 9pt;}
p {margin: 0 0 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="entries">Loading Messages...</div>

于 2015-08-18T07:43:13.810 回答