点击时阻止多个AJAX请求

Blocking multiple AJAX requests on click

本文关键字:AJAX 请求      更新时间:2023-11-05

我有多个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请求已经在工作了吗?

任何建议或参考都将不胜感激。

如果你的服务器和网络运行得很快,而你的客户端"缓慢"双击启动ajax调用的按钮,那么你仍然会有两次调用。

您可以在用户进行两次相同的ajax调用之前强制超时。围绕ajax调用设置一个条件:

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

这用户将在一秒钟内第二次点击。如果你想让他再也不会点击,那么删除setTimeout。或者给他2000毫秒或更长的时间。或者,您可以再次从表单中的另一个事件中删除Data('timeout')(输入上的onchange()?)何时允许您的用户第二次发送数据。这一切都取决于你到底想做什么。

在点击监听器的开头添加一个检查将解决此问题:

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

将按钮设置为在单击时立即禁用可以解决此问题。

我同意@Stuart的回答。你也可以做以下技巧-当用户单击按钮时1.将按钮名称重命名为"please wait..",并删除onclick(如果有)。2.如果您只是在没有任何验证的情况下提交表单(如onsubmit='return validation()'),那么第1点也会起到同样的作用。