如何防止 setTimeout 事件多次发生？

Question

我正在制作剪刀石头布蜥蜴 spock 游戏，我遇到了这个问题：我在显示结果之前触发了一个 setTimeout 事件，因为我想先给它一个加载效果。但是我的结果不是只显示一次，而是被多次附加。我试图在 setTimeout 事件之后添加 clearTimeout()，但没有成功。我的代码很长，因为我是编程新手，我想完全理解编码的工作原理，所以我不会走捷径。而且我也不想只用 "you won/you lost" 走捷径。你能检查我的代码并告诉我我做错了什么吗？
这是 fiddle：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);
}

非常感谢

Answer 1

请将每个 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>

如何防止 setTimeout 事件多次发生？

How can I prevent a setTimeout event occur more than once?

jquery

settimeout

cleartimeout