Question

我的问题是，如果我点击一个按钮并且ajax还没有返回，我点击另一个按钮（或相同的按钮），那么我最终得到两个表在屏幕而不是一个。

场景：我正在构建一个表单，并根据下拉选项提供一组选项。年份/品牌/型号组合带回一系列产品系列 - 地毯/保险杠/地板垫/声音致命人等。每一个都将成为一个按钮，按下后将带回该产品系列的产品。

然后循环产品，我通过javascript创建一个表来显示它们。如果我按一下按钮并等待表格显示一切都很好。如果我选择另一个产品系列，则删除products表格，然后ajax调用返回新产品并通过javascript再次将它们构建到表格中。我得到的问题是，在第一次点击构建表格之前，单击相同的按钮或不同的产品线按钮，我会看到两个表格。

Answer 1

由于模糊的性质而没有真正理解你的问题，我只能真正建议查看以下内容 - ＆gt; jQuery AJAX Global events

具体而言，您可以使用.ajaxStart()和.ajaxComplete()方法在ajaxStart上禁用具有相同课程的按钮 - 然后在ajaxComplete上重新启用它们

示例：

$(document).ajaxStart(function(){ 
  $('.buttonsclass').attr('disabled','disabled');; 
}).ajaxComplete(function(){ 
  $('.buttonsclass').removeAttr('disabled');
});

Answer 2

您可以使用xhr对象的abort方法abort()以前的ajax请求。试试这个

$(document).ready(
     var  xhr = $.ajax({
            url: 'url',
            success: function(data) {
                //do something
            }
        });
    };

    //If you want to abort this call on some condition just do this
    xhr.abort();
);

Answer 3

您可以使用.one()绑定单击处理程序，然后在完成ajax时重新绑定它。比打开它更少的工作。

function clickhandler(){
  //your button actions
}

//the doc ready bind
$(yourButton).bind('click',clickhandler);

$.ajax({
    url:'your url',
    complete : function(){
        //rebind it when it's safe to do so again
        $(yourButton).bind('click',clickhandler);
    }
});

按下另一个按钮时取消当前事件单击和ajax调用

3 个答案: