Question

我正在研究一种石头剪刀蜥蜴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);
}

非常感谢

Answer 1

请将每个setTimeout分配给变量，然后使用指定的变量清除它。

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

逐步调试

＆＃13;

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

＆＃13;

* {font-family: Monaco, 'MonacoB2', Consolas, Courier New, monospace; font-size: 9pt;}
p {margin: 0 0 5px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="entries">Loading Messages...</div>

＆＃13;

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

1 个答案: