Javascript or Jquery function with timer that resets each time it is called

Question

I am looking for a way to call a function that should wait for 1000 miliseconds before executing. And when the function is called again before the 1000 miliseconds are reached, the timer should restart. So that the function runs 1000 miliseconds after the last time it was called.

So let's say I have a button:

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

And I want to display an alert after exactly 1000 miliseconds after the last time it was clicked. But when the button is clicked a second time, before the 1000 miliseconds have past, then the timer should restart.

If someone clicks the button 1 time, then the alert displays 1 second after the click.
If someone clicks the button, and then clicks again after 999 miliseconds, and then again after again 999 miliseconds, then I want to run the function 1 second after the last click (so 2,98 seconds after the first click).

Is this possible? And how? My Best guess would be something like:

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');
}

(inspiration from: Wait for function till user stops typing )

score 3 · Answer 1 · edited Jul 02 '21 at 06:50

Yes it is possible. you just have to check if an timeout is already counting down and, if it is, reset it. Here is a simple example.

// 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>

score 0 · Answer 2 · answered Jul 02 '21 at 06:48

I used lastclick variable to store date user clicked. I defined lastclickworked variable to avoid double setTimeout calls. In settimeout function, i checked if 1 second passed, run the code. if 1 second doesn't passed then call settimeout again with 1 seconds- passed time

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

<button onclick="clickMe();">Click Me!</button>

Javascript or Jquery function with timer that resets each time it is called

2 Answers2