如何修复此 JQuery Multiselect 竞争条件？答案

【问题标题】：How can I fix this JQuery Multiselect race condition?如何修复此 JQuery Multiselect 竞争条件？
【发布时间】：2012-04-10 20:34:58
【问题描述】：

我正在使用Eric Hynd's wonderful multiselect plug in 填充几个下拉菜单。

一是业务单位： ...

$('#lbBusinessUnits').multiselect({
height: "auto",
selectedList: 20
});

... 第二个是业务领域（#lbBusinessAreas）。 ...

$('#lbBusinessAreas').multiselect({
selectedList: 20
});

... 当像这样检查一个单元时，区域列表会更新：

// Business Units List Box Change
$('#lbBusinessUnits').bind("multiselectclick", function (event, ui) {
    var selectedPeriod = $('#ddlSalesPeriods').val();
    var selectedUnit = ui.value;
    var selectedUnitText = ui.text;
    var checkedUnit = ui.checked;
    var areChecked = $(this).multiselect("getChecked").map(function () { return this.value; }).get();

if (areChecked.length > 0) {
    url = '/InvoiceException/LoadBusinessareasBySalesPeriodBusinessUnit';
    $.getJSON(url, { selectedSalesPeriod: selectedPeriod, selectedBusinessUnits: areChecked }, function (areas) {
    var areaSelect = $('#lbBusinessAreas');
    areaSelect.empty();
    $.each(areas, function (index, optionData) {
         areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));
      });
    });
    }
else {
     var url = '/InvoiceException/LoadBusinessAreasBySalesPeriod';
    $.getJSON(url, { selectedSalesPeriod: selectedPeriod }, function (areas) {
    var areaSelect = $('#lbBusinessAreas');
    areaSelect.empty();
    $.each(areas, function (index, optionData) {
    areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));
    });
  });
}
$('#lbBusinessAreas').multiselect("refresh");
});

JSON 结果由 MVC3 控制器处理，并从 URL 调用中正确返回。 IE。返回的数据看起来正确。

但是，区域框 (#lbBusinessAreas) 在单击后无法正确更新。它似乎落后了。刷新框时似乎出现了竞争条件。

当我将它放入 Firebug 并在它调用 multiselect("refresh") 的点放置一个断点时，当我单步调试调试器并按应有的方式运行时，一切正常。

这真的是在选项更新之前完成刷新的竞争条件吗？是不是因为它是一个 ajax/getJson 调用？

我是否需要移动调用以刷新或以某种方式弄清楚以确保操作顺序？ IE。选项需要完成更新，然后需要进行刷新。

【问题讨论】：

在您的 ajax getJSON call 的完成或成功事件期间进行刷新。
谢谢，我今天早上带着新的眼光开始工作，您的评论帮助我在 getJson 成功调用期间将刷新放在正确的位置。有时 javascript 中的括号太多了。

标签： jquery asp.net-mvc-3 getjson race-condition multi-select

【解决方案1】：

我认为在说完所有内容后进行简单的刷新就可以了。 /headbonk 时刻，您意识到您必须等待 getJson 调用成功返回。所以我不得不将刷新移动到每个调用的成功函数中。在这里发布更改/答案，以防其他人有“哦，呃”的时刻。

// Business Units List Box Change
$('#lbBusinessUnits').bind("multiselectclick", function (event, ui) {
    var selectedPeriod = $('#ddlSalesPeriods').val();
    var selectedUnit = ui.value;
    var selectedUnitText = ui.text;
    var checkedUnit = ui.checked;
    var areChecked = $(this).multiselect("getChecked").map(function () { return this.value; }).get();

    if (areChecked.length > 0) {
        url = '/InvoiceException/LoadBusinessareasBySalesPeriodBusinessUnit';
        $.getJSON(url, { selectedSalesPeriod: selectedPeriod, selectedBusinessUnits: areChecked }, function (areas) {
            var areaSelect = $('#lbBusinessAreas');
            areaSelect.empty();
            $.each(areas, function (index, optionData) {
                areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));

            });
            **$('#lbBusinessAreas').multiselect("refresh");**
        });
    }
    else {
        var url = '/InvoiceException/LoadBusinessAreasBySalesPeriod';
        $.getJSON(url, { selectedSalesPeriod: selectedPeriod }, function (areas) {
            var areaSelect = $('#lbBusinessAreas');
            areaSelect.empty();
            $.each(areas, function (index, optionData) {
                areaSelect.append($('<option/>', { value: optionData.Id, text: optionData.Name }));
            });
            **$('#lbBusinessAreas').multiselect("refresh");**
        });
    }
});

【讨论】：