jQuery单击后阻止函数继续运行

Question

let total = 0;

let average = 0;

$(document).ready(function() {

  let tryNbr = 1;

  let timeDiff = null;

  let startSession = $(".startSession");

  let titleInfo = $(".title-info");

  let introP = $(".intro p");

  let highlightBlue = $(".highlight-blue");

  let totalTries = $('#totalTries');

  let clicked = 0;

  $(".average-title").hide();

  startSession.click(function(e) {

    e.stopPropagation();

    e.preventDefault();

    titleInfo.html("Wait for the green...");

    introP.hide();

    startSession.hide();

    waitGreenTime();

  });

  function waitGreenTime() {

    $(".average-title").hide();

    highlightBlue.off();

    highlightBlue.css("cursor", "pointer");

    highlightBlue.animate({

      height: "600",

    });

    let waitGreen = Math.floor(Math.random() * 4 + 2);

    console.log("Green will be shown in:  " + waitGreen + "s");

    highlightBlue.click(function() {

      tooSoon();

    });

    setTimeout(showGreen, waitGreen * 1000)

  }

  function showGreen() {

    highlightBlue.off();

    titleInfo.hide();

    highlightBlue.css("background-color", "green");

    startTime = new Date();

    highlightBlue.click(function() {

      endTime = new Date();

      timeDiff = endTime - startTime;

      console.log(timeDiff);

      results(timeDiff);

    });

  }

  function results(timeDiff) {

    highlightBlue.off();

    titleInfo.html("Your reaction time: " + timeDiff + "ms");

    titleInfo.show();

    introP.html("To see your previous stats check the table down below.").show();;

    startSession.show();

    highlightBlue.animate({

      height: "327",

    });

    highlightBlue.css({

      "background-color": "#131620",

      "cursor": "default"

    });

Answer 1

这里的问题是因为 click 和 setTimeout 是异步的。您可以在它们之间共享一个值：function waitGreenTime() {   $(".average-title").hide();      let isTooSoon = false;      highlightBlue.off();      highlightBlue.css("cursor", "pointer");      highlightBlue.animate({        height: "600",      });      let waitGreen = Math.floor(Math.random() * 4 + 2);      console.log("Green will be shown in:  " + waitGreen + "s");      highlightBlue.click(() => {        isTooSoon = true;        tooSoon();      });      setTimeout(()=>{        if(isTooSoon===false){          showGreen();        }      }, waitGreen * 1000);}

Answer 2

clearTimeout()当事件在预定时间之前发生时，您可以使用：var timoutID = -1;&nbsp;highlightBlue.click(function() {&nbsp; &nbsp;tooSoon();&nbsp; &nbsp;clearTimeout(timeoutID);});timeoutID = setTimeout(showGreen, waitGreen * 1000)let total = 0;let average = 0;$(document).ready(function() {&nbsp; let tryNbr = 1;&nbsp; let timeDiff = null;&nbsp; let startSession = $(".startSession");&nbsp; let titleInfo = $(".title-info");&nbsp; let introP = $(".intro p");&nbsp; let highlightBlue = $(".highlight-blue");&nbsp; let totalTries = $('#totalTries');&nbsp; let clicked = 0;&nbsp; $(".average-title").hide();&nbsp; startSession.click(function(e) {&nbsp; &nbsp; e.stopPropagation();&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; titleInfo.html("Wait for the green...");&nbsp; &nbsp; introP.hide();&nbsp; &nbsp; startSession.hide();&nbsp; &nbsp; waitGreenTime();&nbsp; });&nbsp; function waitGreenTime() {&nbsp; &nbsp; $(".average-title").hide();&nbsp; &nbsp; highlightBlue.off();&nbsp; &nbsp; highlightBlue.css("cursor", "pointer");&nbsp; &nbsp; highlightBlue.animate({&nbsp; &nbsp; &nbsp; height: "600",&nbsp; &nbsp; });&nbsp; &nbsp; let waitGreen = Math.floor(Math.random() * 4 + 2);&nbsp; &nbsp; console.log("Green will be shown in:&nbsp; " + waitGreen + "s");&nbsp; &nbsp; var timoutID = -1;&nbsp; &nbsp; highlightBlue.click(function() {&nbsp; &nbsp; &nbsp; tooSoon();&nbsp; &nbsp; &nbsp; clearTimeout(timeoutID);&nbsp; &nbsp; });&nbsp; &nbsp; timeoutID = setTimeout(showGreen, waitGreen * 1000);&nbsp; }&nbsp; function showGreen() {&nbsp; &nbsp; highlightBlue.off();&nbsp; &nbsp; titleInfo.hide();&nbsp; &nbsp; highlightBlue.css("background-color", "green");&nbsp; &nbsp; startTime = new Date();&nbsp; &nbsp; highlightBlue.click(function() {&nbsp; &nbsp; &nbsp; endTime = new Date();&nbsp; &nbsp; &nbsp; timeDiff = endTime - startTime;&nbsp; &nbsp; &nbsp; console.log(timeDiff);&nbsp; &nbsp; &nbsp; results(timeDiff);&nbsp; &nbsp; });&nbsp; }&nbsp; function results(timeDiff) {&nbsp; &nbsp; highlightBlue.off();&nbsp; &nbsp; titleInfo.html("Your reaction time: " + timeDiff + "ms");&nbsp; &nbsp; titleInfo.show();&nbsp; &nbsp; introP.html("To see your previous stats check the table down below.").show();;&nbsp; &nbsp; startSession.show();&nbsp; &nbsp; highlightBlue.animate({&nbsp; &nbsp; &nbsp; height: "327",&nbsp; &nbsp; });&nbsp; &nbsp; highlightBlue.css({&nbsp; &nbsp; &nbsp; "background-color": "#131620",&nbsp; &nbsp; &nbsp; "cursor": "default"&nbsp; &nbsp; });&nbsp; &nbsp; total = total + timeDiff;&nbsp; &nbsp; console.log("total is " + total);&nbsp; &nbsp; average = total / tryNbr;&nbsp; &nbsp; console.log("avg is " + average);&nbsp; &nbsp; $("#average").text("");&nbsp; &nbsp; $("#average").append(average + "ms " + " | ");&nbsp; &nbsp; let tr = $("<tr></tr>");&nbsp; &nbsp; let td1 = $("<td></td>").text(timeDiff);&nbsp; &nbsp; let td2 = $("<td></td>").text("#" + tryNbr);&nbsp; &nbsp; tr.append(td1, td2);&nbsp; &nbsp; let tableTrRef = $(".table-stats tbody");&nbsp; &nbsp; tableTrRef.append(tr).hide().fadeIn();&nbsp; &nbsp; totalTries.text("").append("Tries: " + tryNbr);&nbsp; &nbsp; $(".average-title").fadeIn();&nbsp; &nbsp; tryNbr++;&nbsp; }&nbsp; function tooSoon() {&nbsp; &nbsp; titleInfo.html("You pressed too soon!");&nbsp; &nbsp; startSession.fadeIn();&nbsp; &nbsp; introP.html("Before you press, please wait for the green background to show. Nice try though!").fadeIn();&nbsp; &nbsp; highlightBlue.animate({&nbsp; &nbsp; &nbsp; height: "327",&nbsp; &nbsp; });&nbsp; }});.average-title {&nbsp; text-align: center;&nbsp; font-size: 15px;&nbsp; color: #ff969f !important;&nbsp; margin-top: 30px;&nbsp; margin-bottom: 0;}.table-stats {&nbsp; width: 50%;&nbsp; color: white;&nbsp; margin-left: auto;&nbsp; margin-right: auto;&nbsp; margin-top: 50px;&nbsp; background-color: #131620;&nbsp; text-align: center;}.table-stats th {&nbsp; border-bottom: 1px solid whitesmoke;&nbsp; font-size: 30px;&nbsp; width: 50%;}th:first-child {&nbsp; border-right: 1px solid whitesmoke;}td:nth-child(odd) {&nbsp; border-right: 1px solid whitesmoke;}td {&nbsp; border-bottom: 1px solid whitesmoke;&nbsp; font-size: 25px;}.footer-basic {&nbsp; margin-top: 340px;&nbsp; background-color: #131620 !important;}<!DOCTYPE html><html><head>&nbsp; <meta charset="utf-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">&nbsp; <title>Reactionz</title>&nbsp; <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">&nbsp; <link rel="stylesheet" href="assets/css/Footer-Basic.css">&nbsp; <link rel="stylesheet" href="assets/css/Highlight-Blue.css">&nbsp; <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">&nbsp; <link rel="stylesheet" href="assets/css/Navigation-Clean.css">&nbsp; <link rel="stylesheet" href="assets/css/styles.css"></head><body style="background-color: #272E42;">&nbsp; <nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background-color: #272e42;">&nbsp; &nbsp; <div class="container"><a class="navbar-brand" href="#" style="color: #ff969f;font-size: 20px;">Reactionz</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>&nbsp; &nbsp; &nbsp; <div class="collapse navbar-collapse" id="navcol-1">&nbsp; &nbsp; &nbsp; &nbsp; <ul class="nav navbar-nav ml-auto">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item" role="presentation"><a class="nav-link active" href="#">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item" role="presentation"><a class="nav-link" href="#">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </nav>&nbsp; <div class="highlight-blue" style="background-color: #131620;">&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class="intro">&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="text-center title-info">How fast do you react?</h2>&nbsp; &nbsp; &nbsp; &nbsp; <p class="text-center">Measure your ability to react. CS: GO professionals have an average score of 150ms and the average human fall between 200-250ms.<br><br></p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div data-bs-hover-animate="tada" class="buttons"><a class="btn btn-primary wobble animated startSession" role="button" href="#" style="background-color: #ff969f;">React</a></div>&nbsp; &nbsp; &nbsp; <p class="average-title">Your average: <span id="average"></span><span id="totalTries"></span></p>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <table class="table-stats">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th>Time (ms)</th>&nbsp; &nbsp; &nbsp; <th>Try</th>&nbsp; &nbsp; </tr>&nbsp; </table>&nbsp; <div class="footer-basic" style="background-color: #272e42;filter: blur(0px) grayscale(0%);">&nbsp; &nbsp; <footer>&nbsp; &nbsp; &nbsp; <ul class="list-inline">&nbsp; &nbsp; &nbsp; &nbsp; <li class="list-inline-item"><a href="#" style="filter: brightness(200%) contrast(0%);">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="list-inline-item"></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="list-inline-item"><a href="#" style="filter: blur(0px) brightness(200%) contrast(0%) grayscale(0%);">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="list-inline-item"></li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="list-inline-item"><a href="#" style="filter: brightness(200%) contrast(0%);">Privacy Policy</a></li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; <p class="copyright">Reactionz © 2019</p>&nbsp; &nbsp; </footer>&nbsp; </div>&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp; <script src="assets/bootstrap/js/bootstrap.min.js"></script>&nbsp; <script src="assets/js/bs-animation.js"></script>&nbsp; <script src="assets/js/script.js"></script></body></html>