クリック時に複数のAJAXリクエストをブロックする

Question

複数のAJAXリクエストに問題があります。たとえば、AJAXリクエストが作成され、データベースにレコードが入力されたときにユーザーがボタンをクリックすると、そのボタンが表示されます。しかし、ユーザーがボタンを複数回クリックすると、同時に複数のAJAX要求が行われ、同じレコードがデータベースに2回入力されます。私は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呼び出しを2回行う前に、タイムアウトを強制することができます。あなたのAjaxコールの周りに条件を設定してください：

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

これは、1秒間に2回目にだけクリックすることができます。彼が決して再びクリックすることができないようにするには、setTimeoutを削除します。 2000ミリ秒以上の時間を与えてください。あるいは、あなたのフォームにある別のイベント（入力時にはonchange（）？）からData（ 'timeout'）を削除して、ユーザーがもう一度データを送信できるようにすることができます。すべては、あなたがしたいことにかかっています。

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の答えに同意します。 ボタン をクリックしたときに、 以下のハッキングを行うこともできます。1.ボタン名を「please wait..」に変更し、onclick（存在する場合）を削除します。 2.妥当性チェックなしでフォームを送信するだけの場合（onsubmit='return validation()'など）、ポイント1は同じトリックを行います。