Question

我有一个TreeView，里面有一些节点。每当用户点击某个节点时，就会运行一些代码：

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请求触发后在TreeView中选择了一个新节点，我会暂时显示不正确的数据。如果新单击的节点不覆盖旧节点映像，则会加剧此问题。

我真的不想在多个地方擦除画布来处理这种情况。相反，我想杀死我的ajax请求，以便加载事件永远不会触发。

这听起来像是解决我问题的合理方法吗？建议吗？我还在学习如何正确地与异步事件进行交互。

Answer 1

无论哪种方式，你的画布都会“暂时”无效。问题是，你想冻结用户的浏览器（同步调用会做什么），或者实现你自己的“请稍候”的方法（这是更多的工作）。

同步调用不受欢迎，因为锁定浏览器通常被认为是无礼的（充其量）。我唯一一次使用它是为了对本地服务器进行快速原型设计。

Answer 2

我认为这是一个解决方案。它适用于我的目的，我没有看到任何危险的边缘情况。

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调用的正确情况吗？

2 个答案: