带有计时器的 Javascript 或 Jquery 函数，每次调用时都会重置答案

【问题标题】：Javascript or Jquery function with timer that resets each time it is called带有计时器的 Javascript 或 Jquery 函数，每次调用时都会重置
【发布时间】：2021-07-02 06:28:21
【问题描述】：

我正在寻找一种调用函数的方法，该函数应在执行前等待 1000 毫秒。并且当在达到 1000 毫秒之前再次调用该函数时，计时器应该重新启动。以便该函数在 最后一次被调用后 1000 毫秒运行。

假设我有一个按钮：

<button type="button" id="btnclick">Click Me!</button>

我想在最后一次被点击后恰好 1000 毫秒后显示一个警报。但是当第二次单击按钮时，在 1000 毫秒过去之前，计时器应该重新启动。

如果有人单击按钮 1 次，则在单击后 1 秒显示警报。
如果有人单击按钮，然后在 999 毫秒后再次单击，然后在 999 毫秒后再次单击，那么我想在最后一次单击后 1 秒运行该功能（即第一次单击后 2.98 秒）。

这可能吗？如何？我最好的猜测是：

function delay(callback, ms) {
    var timer = 0;
    return function () {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            callback.apply(context, args);
        }, ms || 0);
    };
}

$('#btnclick').click(function(e){
    console.log('I want to see this everytime the button is clicked, without any delay');
    delay(waitFunction(),1000);
});


function waitFunction(){
    console.log('I want to see this 1 second after the LAST click');
}

（灵感来自：Wait for function till user stops typing）

【问题讨论】：

标签： javascript jquery timer

【解决方案1】：

是的，这是可能的。您只需要检查超时是否已经倒计时，如果是，请重置它。这是一个简单的例子。

// set timer-variable
var timer = null;

//on button-click
$('#btnclick').click (function (e) {

    //clear timeout if already applied
    if (timer) {
    
        clearTimeout (timer);
        timer = null;
    
    }
    
    //set new timeout
    timer = setTimeout (function () {
    
            //call wait-function and clear timeout
            waitFunction ();
            clearTimeout (timer);
            timer = null;
            
    }, 1000);
    
});

function waitFunction () {

    console.log ('I want to see this 1 second after the LAST click');
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btnclick">Click Me!</button>

【讨论】：

【解决方案2】：

我使用 lastclick 变量来存储用户点击的日期。我定义了 lastclickworked 变量以避免双重 setTimeout 调用。在 settimeout 函数中，我检查是否经过 1 秒，运行代码。如果 1 秒未过去，则在 1 秒后再次调用 settimeout

var lastclick=null;
var lastclickworked=true;
function clickMe(){

  lastclick=new Date();
  if(lastclickworked)
    runcallback(1000);
}
function runcallback(milliseconds){
    lastclickworked=false;
    setTimeout(function(){
      var current = new Date();
      var milliseconds = (current.getTime() - lastclick.getTime());
      if(milliseconds<1000){
        runcallback(1000-milliseconds);
      }else{
          lastclickworked=true;
        console.log('you clicked 1 second ago');  
      }


  },milliseconds);
}

&lt;button onclick="clickMe();"&gt;Click Me!&lt;/button&gt;

【讨论】：