javascript - 避免多个ajax绑定(bind)

Question

模式面板中的选择框发生变化。我正在触发 ajax 请求并加载模式面板数据取决于响应。

我看到第一次尝试时最初只有一个请求被触发。但随着选择选项的次数不断增加。

下面是我的脚本

$(".dds").msDropDown();
$('#dropdown').off('change');
$('#dropdown').on('change', takeAction);

function takeAction(event){
event.preventDefault();
var colour = $('#colors .selected').attr('data-color');
console.log(colour);
new Ajaxinator().jsonPost({
    url :$(event.currentTarget).val(),
    data : {
        name : $(event.currentTarget).attr('title'),
        colour : colour
    },
    success: function (response)
    {   
    $('#dropdown').off('change');

    $('#Data').html(response.Data);
    $('#dropdown').off('change',takeAction);

}
});

};

我认为这是因为新绑定(bind)为 #dropdown 创建的每个 ajax 请求，并且 onchange 函数被多次调用。谁能帮帮我。

Answer 1

你能尝试一下吗？

var oAJAXRequest = false; //GLOBAL VARIABLE

$("#dropdown").unbind('change');
$("#dropdown").bind('change', takeAction);


function takeAction(){

    if(oAJAXRequest != false){
      return;
    }

    event.preventDefault();
    var colour = $('#colors .selected').attr('data-color');
    oAJAXRequest = $.ajax({
        type: 'POST',
        url: $(event.currentTarget).val(),
        data : {
          name : $(event.currentTarget).attr('title'),
          colour : colour
        },
        success: function(data) {
            $('#Data').html(response.Data);
            oAJAXRequest = false;
        },
        error: function(jqXHR, sMessage, oException) {
            oAJAXRequest = false;
        }
    });
}