Как настроить setTimeout и clearTimeout для работы на одной кнопке

Question

Вот мой код

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

Где я могу разместить функцию clearTimeout (), чтобы каждый раз, когда я нажимал одну и ту же кнопку, таймер сбрасывался?Спасибо!

Answer 1

Попробуйте:

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

Сделать time глобальной переменной или доступной вне обработчика щелчков.Проверьте значение времени, если оно имеет какое-либо значение, то сбросьте его, иначе ваш обычный код будет работать.

Answer 2

Используйте атрибут данных для хранения состояния таймера.Вы можете использовать атрибут данных, чтобы определить, нужно ли его отменить.Вы сохраняете идентификатор тайм-аута в атрибуте данных и по клику проверяете его.

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

, если вы хотите, чтобы он перезапустился, не делайте иначе, и нет необходимости устанавливать для атрибута данных значение null, поскольку вы перезапишете его.

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

---

Пример работы на нескольких кнопках

$('.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>