如何clearTimeout以便我可以重新使用该功能？

Question

到目前为止，这个（下面的代码）允许我延迟我的功能，在我点击一个按钮后显示响应4秒。现在我想知道如何重置这个时间，以便我可以重新单击按钮以延迟发生。

JS：

var ball = document.getElementById("ball"); 

    function start(){
        console.log("start");
        ball.classList.toggle("shake");
}; 

    ball.addEventListener("click", start);

function newResponse() { 
     var question = document.getElementById("question").value;
     var response = ["..."];

     for (var i = 0; i < question.length; i++) {

     var randomResponse = Math.floor(Math.random() * response.length);
        document.getElementById('quoteDisplay').innerHTML = response[randomResponse];
     }
}

ball.addEventListener("click", newResponse)

Answer 1

在超时之外声明函数，以便您可以多次引用它。然后，使用函数调用setTimeout，将结果分配给变量，如果要清除超时，请在该变量上调用clearTimeout：

function newResponse() { 
  var question = document.getElementById("question").value;
  var response = ["..."];
  for (var i = 0; i < question.length; i++) {       
    var randomResponse = Math.floor(Math.random() * response.length);
    document.getElementById('quoteDisplay').innerHTML = 
      response[randomResponse];
  }
}
// Set the timeout once:
let timeout = setTimeout(newResponse,4000);
// Clear it:
clearTimeout(timeout);
// Set the timeout again:
timeout = setTimeout(newResponse,4000);
// etc

Answer 2

$('#test').click(function(){

   var timer = setTimeout(function newResponse() { 

        alert('Click answered...');

        clearTimeout(timer);
    },4000)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="test" id='test'/>

你可以这样做

var timer = setTimeout(function newResponse() { 

        var question = document.getElementById("question").value;

        var response = ["..."];


    for (var i = 0; i < question.length; i++) {       

     var randomResponse = Math.floor(Math.random() * response.length);
            document.getElementById('quoteDisplay').innerHTML = 
            response[randomResponse];
        }

    clearTimeout(timer);
    },4000)