How do I set setTimeout and clearTimeout to function on the same button

Question

Here is my code

$('#btnDelete').unbind().click(function(){
    var time = setTimeout(function() {
        $.ajax({
            type: 'ajax',
            method: 'get',
            async: false,
            url: '<?php echo base_url() ?>main/delete',
            data: {id:id},
            dataType: 'json',
            success: function(response){
                if(response.success){
                    showNews();
                } else {
                    alert('Error');
                }
            },
            error: function(){
                alert('Error deleting')
            }
        });
    }, 10000);
});

Where can i place the clearTimeout() function so that each time i click the same button the timer resets? Thanks!

Answer 1

Try this:

  var time;
  $('#btnDelete').unbind().click(function() {
    if (time) {
      clearTimeout(time);
      time = null;
    }
    time = setTimeout(function() {
      $.ajax({
        type: 'ajax',
        method: 'get',
        async: false,
        url: '<?php echo base_url() ?>main/delete',
        data: {
          id: id
        },
        dataType: 'json',
        success: function(response) {
          if (response.success) {
            showNews();
          } else {
            alert('Error');
          }
        },
        error: function() {
          alert('Error deleting')
        }
      });
    }, 10000);
  });

Make time as a global variable or accessible outside the click handler. Check the value of time, if it has any value then reset it else your normal code will work.

Answer 2

Use a data attribute to hold the state of the timer. You can use the data attribute to determine if you need to cancel it. You store the timeout id into the data attribute and on the click you check for it.

$('#btnDelete').unbind().click(function(){
   var btn = $(this);  // reference the button that was clicked
   if (btn.data("timer")) {  // determine if it was already clicked
      window.clearTimeout(btn.data("timer"))  // cancel the timeout
      btn.data("timer", null);  // toggle it to not being used
   } else {
     var time = setTimeout(function() {
       btn.data("timer", null);  // reset it if you want
       /* your code here */
     }, 10000)
     btn.data("timer", time);  // store the timeout id for next click
   }
});

if you want it to restart than do not do the else and there is no need to set the data attribute to null since you will overwrite it.

$('#btnDelete').unbind().click(function(){
   var btn = $(this);
   if (btn.data("timer")) {
      window.clearTimeout(btn.data("timer"))
   }
   var time = setTimeout(function() {
       btn.data("timer", null);  // reset it if you want
       /* your code here */
   }, 10000)
   btn.data("timer", time);
});

---

Example running on multiple buttons

 $('.btn-delete').unbind().click(function(){ var btn = $(this); // reference the button that was clicked if (btn.data("timer")) { // determine if it was already clicked window.clearTimeout(btn.data("timer")) // cancel the timeout btn.data("timer", null); // toggle it to not being used } else { var time = setTimeout(function() { btn.data("timer", null); // reset it if you want btn.text((new Date()).toLocaleString()) }, 3000) btn.data("timer", time); // store the timeout id for next click } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="btn-delete">Delete 1</button> <button class="btn-delete">Delete 2</button> <button class="btn-delete">Delete 3</button> <button class="btn-delete">Delete 4</button>