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!

Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — , Dec 05 '18 at 14:46

K K · Answer 1 · 2018-12-05T14:59:53.780

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.

epascarello · Answer 2 · 2018-12-05T17:10:44.303

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>

Thanks! your code works. But how do i make it work for multiple records? i currently have a database which holds 4 records and all of them have their own individual buttons for the setting and resetting of timers — Francis, Dec 05 '18 at 15:32
That code should work for each button you bind it too since the timer is bound to the button and does not use a global variable.. — epascarello, Dec 05 '18 at 15:34
tried to consecutively press the 4 buttons and only the last one pressed executes the function — Francis, Dec 05 '18 at 15:42
Well your code above binds to an id and ids can only be one element on a page... So did you change the selector? — epascarello, Dec 05 '18 at 15:42
Well hard to help when I have no clue what you tried.... How did you change your code? — epascarello, Dec 05 '18 at 17:06

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

2 Answers2