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

Question

I am working on a rock-paper scissors lizard spock game and I am encoutering this issue: I evoke a setTimeout event before the results are displayed because I wanted to give it a loading effect first. But insted of being shown just once, my results are being appended multiple times. I tried to add clearTimeout() after the setTimeout event and it did not do the trick. My code is pretty long, since I am new to programming and I want to fully understand how coding works, so I am not taking shortcuts. And I also did not want to do the shortway with just: "you won/you lost". Could you please review my code and tell me what I am doing wrong?
Here is the fiddle: http://jsfiddle.net/Daria90/rdLyb79p/48/
Below a part of the javascript code

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

Many thanks

Answer 1

Please assign each setTimeout to a variable and then clear it using the assigned variable.

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

Step by Step Debugging

$(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>