Блокировка нескольких запросов AJAX при нажатии

Question

У меня проблема с несколькими запросами AJAX. Например, есть кнопка, когда пользователь нажимает на нее, выполняется запрос AJAX, и запись вводится в базу данных. Однако, если пользователь нажимает кнопку несколько раз по-настоящему быстро, одновременно выполняются несколько запросов AJAX, которые заставляют одну запись записывать в базу дважды. Я попробовал async: false или нажатие кнопки неактивно все еще происходит.

JavaScript

var myObject = { 
    demoButton : function(thisIdentity) { 
    "use strict"; 
    var myObj = this; 
    $(document).on('click', thisIdentity, function(e) { 
     e.preventDefault(); 
     var trigger = $(this); 
     trigger.addClass('inactive_icon'); 
     var param = trigger.attr("rel"); 
     var item = param.split("_"); 
     var section = trigger.attr("data-section"); 
     $.ajax({ 
      type: "POST", 
      url: "mod/check_login.php", 
      dataType: "json", 
      success: function(data) 
      { 
       if(data.job == 1) 
       { 
        $.post('mod/button_processing.php',{ id : item[0], job : item[1] }, function(data) { 
         var new_id = item[0] + '_' + data.job + '_' + item[2]; 
         if (data.job != item[1]) { 
          if (data.job === 0) { 
           trigger.attr("rel", new_id); 
           if(section == 'postOpen') 
           { 
            trigger.css("color", "#677077"); 
           } 
           else 
           { 
            trigger.css("color", "white"); 
           } 
           myObject.updateCount(item[0]); 
           $.ajax({ 
            type: "POST", 
            data : { aid : item[2], type : 1, pid : item[0] }, 
            url: "mod/mark_notifications.php" 
           });          
          } 
          else if(data.job === 1) 
          { 
           trigger.attr("rel", new_id); 
           trigger.css("color", "red"); 
           myObject.updateCount(item[0]); 
           $.post('mod/add_notification.php',{ pid : item[0], paId : item[2], type : 1 }, function(data) { 
            if(data.nid != false) 
            { 
             var action = 'like'; 
             myObj.conn.sendMsg(item[2], data.nid, action); 
            } 
           }, 'json'); 
          } 
          else if(data.job === 2) 
          { 
           mscAlert({ 
            title: 'Error', 
            subtitle: 'Try some time later.', 
            okText: 'Close', 
           }); 
          } 
         } 
        }, 'json');       
        trigger.removeClass('inactive_icon'); 
       } 
       else if(data.job == 0) 
       { 
        var param = {'c': 2}; 
        $('.element_to_pop_up').bPopup({ 
         content: 'ajax', 
         contentContainer: '.content', 
         loadUrl: 'mod/filler.php', 
         loadData: param, 
         modalColor: '#fff', 
         positionStyle: 'fixed', 
        }); 
       } 
      } 
     }); 
    }); 
}, //other functions 
} 
$(function() { myObject.likeButton(".like"); } 

HTML

<button class="like" //other attributes>Like</button> 

Есть ли способ блокировать одновременные запросы AJAX, если же запрос уже работает?

Любые предложения или рекомендации были бы высоко оценены.

Answer 1

Если ваш сервер и сеть идут быстро, и ваш процесс клиента «медленный» дважды нажмите на кнопки, которая запускает ajax, тогда у вас будет двойной вызов.

Вы можете заставить тайм-аут прежде, чем пользователь сможет выполнить один и тот же вызов ajax дважды. Установить состояние вокруг АЯКС вызова:

// ... 
var $this = $(this); 
if ($this.data('timeout') != undefined) { 
    $this.data('timeout', true); 
    setTimeout(function() { $this.removeData('timeout'); }, 1000); 
    $.ajax({ 
    // ... 

Что это пользователь будет abble нажать второй раз в одну секунду. Если вы хотите, чтобы он никогда не удался снова щелкнуть, удалите setTimeout. Или дайте ему больше времени с 2000 мс или более. Или вы снова можете удалитьData ('timeout') из другого события в вашей форме (onchange() на входах?), Когда вашему пользователю будет разрешено отправлять данные во второй раз. Все зависит от того, что вы точно хотите сделать.

Answer 2

Добавление проверки в начале вашего щелчка слушателю решить эту проблему:

var myObject = { 
    demoButton : function(thisIdentity) { 
    "use strict"; 
    var myObj = this; 
    $(document).on('click', thisIdentity, function(e) { 
     e.preventDefault(); 
     if (window.inAjax) { 
      return false; 
     } 
     window.inAjax = true; 
     var trigger = $(this); 
     trigger.addClass('inactive_icon'); 
     var param = trigger.attr("rel"); 
     var item = param.split("_"); 
     var section = trigger.attr("data-section"); 
     $.ajax({ 
      type: "POST", 
      url: "mod/check_login.php", 
      dataType: "json", 
      success: function(data) 
      { 
       if(data.job == 1) 
       { 
        $.post('mod/button_processing.php',{ id : item[0], job : item[1] }, function(data) { 
         var new_id = item[0] + '_' + data.job + '_' + item[2]; 
         if (data.job != item[1]) { 
          if (data.job === 0) { 
           trigger.attr("rel", new_id); 
           if(section == 'postOpen') 
           { 
            trigger.css("color", "#677077"); 
           } 
           else 
           { 
            trigger.css("color", "white"); 
           } 
           myObject.updateCount(item[0]); 
           $.ajax({ 
            type: "POST", 
            data : { aid : item[2], type : 1, pid : item[0] }, 
            url: "mod/mark_notifications.php" 
           });          
          } 
          else if(data.job === 1) 
          { 
           trigger.attr("rel", new_id); 
           trigger.css("color", "red"); 
           myObject.updateCount(item[0]); 
           $.post('mod/add_notification.php',{ pid : item[0], paId : item[2], type : 1 }, function(data) { 
            if(data.nid != false) 
            { 
             var action = 'like'; 
             myObj.conn.sendMsg(item[2], data.nid, action); 
            } 
           }, 'json'); 
          } 
          else if(data.job === 2) 
          { 
           mscAlert({ 
            title: 'Error', 
            subtitle: 'Try some time later.', 
            okText: 'Close', 
           }); 
          } 
         } 
         window.inAjax = false; 
        }, 'json');       
        trigger.removeClass('inactive_icon'); 
       } 
       else if(data.job == 0) 
       { 
        var param = {'c': 2}; 
        $('.element_to_pop_up').bPopup({ 
         content: 'ajax', 
         contentContainer: '.content', 
         loadUrl: 'mod/filler.php', 
         loadData: param, 
         modalColor: '#fff', 
         positionStyle: 'fixed', 
        }); 
       } 
      } 
     }); 
    }); 
}, //other functions 
} 
$(function() { myObject.likeButton(".like"); } 

Answer 3

Установка кнопки, которая будет немедленно отключена при нажатии, решит это.

Answer 4

Я согласен с ответом @Stuart. Вы также можете сделать ниже hacks- , когда пользователь нажимает кнопку 1. переименуйте название кнопки на «please wait..» и удалите onclick (если есть). 2. Если вы просто отправляете форму без какой-либо проверки (например, onsubmit='return validation()'), тогда пункт № 1 будет делать тот же трюк.