Javascript 这是同步ajax调用的正确情况吗？

我有一个树视图，里面有一些节点。每当用户单击节点时，都会运行一些代码：

function LoadFloorPlan(componentID) {
    var floorPlanImage = new Image();

    //Will only fire if component has a floorPlan, else no image returned.
    $(floorPlanImage).load(function () {
        //Resize the stage now that that we know the image's dimensions.
        //Don't use img's width because a small stage may truncate the messageLayer.
        planViewStage.setSize($('#tabs-6').width(), floorPlanImage.height);

        PaintFloorPlan(floorPlanImage);
        GetDiagrams(componentID);
    });

    $.ajax({
        url: '../PlanView/RenderFloorPlanImage',
        data: { ComponentID: componentID },
        datatype: 'json',
        success: function (imageSource) {
            //TODO: This isn't correct for all browsers.
            if (imageSource !== "") {
                //TODO: When the component's node stores information about itself, check it for a 'HasFloorPlan' attribute.
                floorPlanImage.src = '../PlanView/RenderFloorPlanImage?ComponentID=' + componentID;
            }
            else {
                WriteMessage("The selected component has no associated floor plan.");
            }
        }
    });
}

我遇到上述代码的计时问题。如果用户在ajax请求发出后在树视图中选择了一个新节点，我会立即显示不正确的数据。如果新单击的节点未覆盖旧节点映像，则此问题会加剧

我真的不想在多个地方擦拭画布来处理这个场景。相反，我希望终止ajax请求，这样加载事件就不会触发

---

这听起来是解决我问题的合理方法吗？劝告我仍在学习如何正确地与异步事件交互。

无论哪种方式，您的画布都将“暂时”无效。问题是，您想冻结用户的浏览器（同步调用可以做到这一点），还是实现自己的“请等待”方法（这是一项更大的工作）

---

不赞成同步调用，因为锁定浏览器通常被认为是不礼貌的（最多）。我唯一一次使用它是为了针对本地服务器进行快速原型设计。

我正在考虑将其作为一种解决方案。就我的目的而言，它运行良好，我没有看到任何危险的边缘情况

var requestCount = 0;
function LoadFloorPlan(componentID) {
    requestCount++;
    var floorPlanImage = new Image();

    //Will only fire if component has a floorPlan, else no image returned.
    $(floorPlanImage).load(function () {
        requestCount--;
        if (requestCount == 0) {
            //Resize the stage now that that we know the image's dimensions.
            //Don't use img's width because a small stage may truncate the messageLayer.
            planViewStage.setSize($('#tabs-6').width(), floorPlanImage.height);

            PaintFloorPlan(floorPlanImage);
            GetDiagrams(componentID);
        }
    });

    $.ajax({
        url: '../PlanView/RenderFloorPlanImage',
        data: { ComponentID: componentID },
        datatype: 'json',
        success: function (imageSource) {
            //TODO: This isn't correct for all browsers.
            if (imageSource !== "") {
                //TODO: When the component's node stores information about itself, check it for a 'HasFloorPlan' attribute.
                floorPlanImage.src = '../PlanView/RenderFloorPlanImage?ComponentID=' + componentID;
            }
            else {
                WriteMessage("The selected component has no associated floor plan.");
                requestCount--;
            }
        },
        error: function () {
            WriteMessage("There was an error rendering the floor plan.");
            requestCount--;
        }
    });
}

---

您可以在“ajax队列”中搜索关于如何终止现有ajax调用的选项。这里有几个jQuery插件，我想我可能会采取完全不同的方法。我正在尝试一个'requestCount'变量，我在LoadFloorPlan开始时递增，在成功/失败时递减。然后，如果requestCount大于0，我就不会在load内部执行代码。这听起来合理吗？当然，这是常见的模式。在中有一些有关此技术的提示。