Question

I have a TreeView with some nodes inside of it. Whenever the user clicks on a node, some code runs:

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.");
            }
        }
    });
}

I am experiencing timing issues with the above code. If the user selects a new node in the TreeView after the ajax request has fired off I display incorrect data momentarily. This issue is exacerbated if the newly clicked node does not overwrite the old nodes image.

I don’t really want to wipe the canvas in multiple places to handle this scenario. Instead, I would like to kill my ajax request such that the load event never fires.

Does this sound like a reasonable approach to my problem? Advice? I am still learning how to interact with asynchronous events properly.

Answer 1

I am considering this as a solution. It works well for my purposes and I don’t see any dangerous edge cases.

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--;
        }
    });
}