0

我想要做的是让 question2 函数在问题函数的 settimeout 到期时运行。我只在第一个“if”语句上抛出了 settimeout 函数来尝试测试，但我最终会将它们全部放在上面。任何援助将不胜感激。

第一步是你点击开始按钮，计时器开始，问题1通过功能问题出现。我拉出各种答案选项并将它们放入 if 函数中。如果正确答案被击中，则将添加 1 并显示所有内容，并显示问题 1 的图像附件。问题在于我想在第一个问题完成后运行 question2 函数。任何帮助，将不胜感激。我一直并且正在继续调查，并希望得到可能的反馈。

$(".Start_Button").click(function() {

    function countdown() {
        timer = 20;
        timerId = setInterval(function() {
        timer--;
        console.log(timer);
        $(".timer").html("Timer: " +timer);
        if(timer == 0) {
            console.log("Time is up");
            alert("Time is up!");
            incorrect ++;
            $("#img1").show();
            $(".list-group").hide();
            $(".Game").hide();
            $(".timer").hide();
            $(".timer").reset();
            }        
        }, 1000);
    }
    countdown();


    $(".Start_Button").hide();
    function questions () {
        $(".list-group").show();
        $(".Game").html(questions[0]);
        $(".list-group-item1").html(answers1[0]);
        $(".list-group-item2").html(answers1[1]);
        $(".list-group-item3").html(answers1[2]);
        $(".list-group-item4").html(answers1[3]);

    if($(".list-group-item4").click(function(){
        setTimeout(function (){
        alert("you got it right!");
        correct ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();
        question2();
    })
    })); 

  if($(".list-group-item1").click(function(){
       alert("you got it wrong!");
       incorrect ++;
       $("#img1").show();
       $(".list-group").hide();
       $(".Game").hide();
       $(".timer").hide();
       $(".timer").reset();
   }));

   if($(".list-group-item3").click(function(){
        alert("you got it wrong!");
        incorrect ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();
   }));

  if($(".list-group-item4").click(function(){
        alert("you got it wrong!");
        incorrect ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();
  }));

}
questions();



function question2() {
$(".list-group").show();
$(".Game").html(questions[1]);
$(".list-group-item1").html(answers2[0]);
$(".list-group-item2").html(answers2[1]);
$(".list-group-item3").html(answers2[2]);
$(".list-group-item4").html(answers2[3]);

if($(".list-group-item2").click(function(){
    alert("you got it right!");
    correct ++;
    $("#img1").show();
    $(".list-group").hide();
    $(".Game").hide();
    $(".timer").hide();
    $(".timer").reset();
})); 

   if($(".list-group-item1").click(function(){
   alert("you got it wrong!");
   incorrect ++;
   $("#img1").show();
   $(".list-group").hide();
   $(".Game").hide();
   $(".timer").hide();
   $(".timer").reset();
  }));

  if($(".list-group-item3").click(function(){
  alert("you got it wrong!");
  incorrect ++;
  $("#img1").show();
  $(".list-group").hide();
  $(".Game").hide();
  $(".timer").hide();
  $(".timer").reset();
  }));

 if($(".list-group-item4").click(function(){
 alert("you got it wrong!");
 incorrect ++;
 $("#img1").show();
 $(".list-group").hide();
 $(".Game").hide();
 $(".timer").hide();
 $(".timer").reset();
 }));    
 }

 question2();

});    
});

 <body>

  <div class = "container">
  <div class = "row">
  <div class = "col-md-12">
    <div class = "timer">
    </div>
    </div>
       </div>


    <div class = "row">
    <div class = "col-md-12">
    <div class = "Game">
    </div>
    </div>
    </div>

   <div class = "row">
  <div class = "col-md-12">
  <div class = "answers">
  <ul class="list-group">
  <button class="list-group-item1"></button>
  <button class="list-group-item2"></button>
  <button class="list-group-item3"></button>
  <button class="list-group-item4"></button>
   </ul>
    </div>
   </div>
   </div>

   <div class = "row">
   </div>

   <div class = "row"></div>
   <div class = "Start_Button">
   <button type="button" class="btn btn-secondary btn-lg">Start</button>
    </div>

   <div class = "Photos">
   <div class = "row">
    <img id = "img1" src = "assets/images/map-of-asia.gif">
    <img id = "img2" src = "assets/images/Flag_of_Canada.svg.png">
    <img id = "img3" src = "assets/images/Antartica.jpg">
    <img id = "img4" src = "assets/images/Peru.jpg">
    <img id = "img5" src = "assets/images/sudan-location-map.jpg">
    <img id = "img6" src = "assets/images/Alaska.jpg">
    <img id = "img7" src = "assets/images/Saudi_Arabia.png">
    <img id = "img8" src = "assets/images/Brazil.jpg">
      </div>
      </div>

      </div>
      </body>
4

3 回答 3

1

我认为您的问题可能在于您在 questions() 函数中为 question2 调用函数的位置。

尝试将question2()函数从 setTimeOut() 回调中取出以获得完整答案，并在为 questions() 函数编写事件处理程序后，编写一个三元运算符来检查您的计数器是否correct增加了 1。如果是递增（即correct++），然后渲染 question2()

于 2018-12-07T02:45:20.647 回答
1

我大致就是你的意思。试试下面的脚本：

$(".Start_Button").click(function() {
     $(".Start_Button").hide();
     questions();
     countdown();
});

function countdown() {
    timer = 20;
    timerId = setInterval(function() {
    timer--;
    console.log(timer);
    $(".timer").html("Timer: " +timer);
    if(timer == 0) {
        console.log("Time is up");
        alert("Time is up!");
        incorrect ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();

        //call question2 here
        question2();
        countdown(); //reset timer again
        }        
    }, 1000);
}

function questions () {
    $(".list-group").show();
    $(".Game").html(questions[0]);
    $(".list-group-item1").html(answers1[0]);
    $(".list-group-item2").html(answers1[1]);
    $(".list-group-item3").html(answers1[2]);
    $(".list-group-item4").html(answers1[3]);

    $(".list-group-item4").click(function(){
        setTimeout(function (){
        alert("you got it right!");
        correct ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();
        question2();
    });

    $(".list-group-item1").click(function(){
       alert("you got it wrong!");
       incorrect ++;
       $("#img1").show();
       $(".list-group").hide();
       $(".Game").hide();
       $(".timer").hide();
       $(".timer").reset();
   });

   $(".list-group-item3").click(function(){
        alert("you got it wrong!");
        incorrect ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();
   });

   $(".list-group-item4").click(function(){
        alert("you got it wrong!");
        incorrect ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();
  });
}


function question2() {

    $(".list-group").show();
    $(".Game").html(questions[1]);
    $(".list-group-item1").html(answers2[0]);
    $(".list-group-item2").html(answers2[1]);
    $(".list-group-item3").html(answers2[2]);
    $(".list-group-item4").html(answers2[3]);

    $(".list-group-item2").click(function(){
        alert("you got it right!");
        correct ++;
        $("#img1").show();
        $(".list-group").hide();
        $(".Game").hide();
        $(".timer").hide();
        $(".timer").reset();
    }); 

      $(".list-group-item1").click(function(){
       alert("you got it wrong!");
       incorrect ++;
       $("#img1").show();
       $(".list-group").hide();
       $(".Game").hide();
       $(".timer").hide();
       $(".timer").reset();
      });

      $(".list-group-item3").click(function(){
      alert("you got it wrong!");
      incorrect ++;
      $("#img1").show();
      $(".list-group").hide();
      $(".Game").hide();
      $(".timer").hide();
      $(".timer").reset();
      });

     $(".list-group-item4").click(function(){
     alert("you got it wrong!");
     incorrect ++;
     $("#img1").show();
     $(".list-group").hide();
     $(".Game").hide();
     $(".timer").hide();
     $(".timer").reset();
     });    

 }
于 2018-12-07T03:39:23.817 回答
0

以更简单的方式可以这样做：

function test1() {
    setTimeout(function () {
        test2();
    }, 3000)
}
test1();
function test2() {
    console.log(5)
}
于 2018-12-07T04:43:51.430 回答