I have a listener on a select element’s change event: on change, a file

Question

0

Asked: June 12, 20262026-06-12T02:31:27+00:00 2026-06-12T02:31:27+00:00

I have a listener on a select element’s change event: on change, a file

0

I have a listener on a select element’s change event: on change, a file is fetched and a complicated SVG is calculated and loaded to the DOM (read: a fair number of CPU cycles required). Issue is if you change the select very quickly (via coded keyboard shortcuts), multiple things are loaded to the SVG container — I only want one loaded at a time. To try to remedy this, I’ve done this (semi-pseudo):

select.on("change", function() { queue(this.val); });

var queuedFile, state = "ready";
function queue(file) {
    queuedFile = file;
    // NB: in real code, queuedFile is a property and the getter empties the queue
    if (state === "ready") { loadFile(queuedFile); }
}

function loadFile(file) {
    state = "busy";

    ajaxGet(file, function(result) {

        // lots of statements, iterators, calls to other fns

        state = "ready";
        // NB: again in real code the getter empties the queue
        var qf = queuedFile;
        if (qf) { clearSVG(); loadFile(qf); }

    }); // end ajaxGet
}

That is to say: on select change, queue the new file and if the file loader is not busy loading another file, load it, else do nothing. When the file loader is done, if there’s a queued file, clear the SVG and load the queued file. Seems like this should only allow one file in the SVG container at once.

In practice, state is never "busy" when it’s checked in queue(), so I’m still getting multiple files loaded to the SVG. A console.log(state) right after state = "busy" shows "busy" though. What am I missing here? I don’t think it’s an issue with the scope of queuedFile.

For completeness, my queue property is this:

// given: all of this code is enclosed in a function that returns an object "viewer".
// (only one instance of the "viewer" is created)

Object.defineProperty(viewer, "queuedFile", {
    get: function () {
        console.log("dequeuing", this.filequeue);
        var buffer = this.filequeue;
        this.filequeue = null;
        return buffer;
    },
    set: function (newval) {
        console.log("queuing", newval);
        this.filequeue = newval;
    }
});