0

select要素のイベントのリスナーがありchangeます。変更すると、ファイルがフェッチされ、複雑なSVGが計算されてDOMにロードされます（読み取り：かなりの数のCPUサイクルが必要です）。問題は、select（コード化されたキーボードショートカットを介して）非常にすばやく変更すると、複数のものがSVGコンテナーにロードされることです。一度に1つだけロードする必要があります。これを改善するために、私はこれを行いました（半疑似）：

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
}

つまり、select変更時に新しいファイルをキューに入れ、ファイルローダーが別のファイルのロードでビジーでない場合はロードし、それ以外の場合は何もしません。ファイルローダーが完了したときに、キューに入れられたファイルがある場合は、SVGをクリアして、キューに入れられたファイルをロードします。このように、SVGコンテナ内のファイルは一度に1つしか許可されないようです。

実際には、チェックインされたときstateは決してないので、SVGに複数のファイルがロードされています。ショーの直後ですが。ここで何が欠けていますか？スコープの問題ではないと思います。"busy"queue()console.log(state)state = "busy""busy"queuedFile

完全を期すために、私のキュープロパティは次のとおりです。

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

1 に答える 1

0

コメントによると、これはあなたを助けるようです！

http://jsfiddle.net/2FNsh/1/

そして、最終的に助けたあなたのフォーク：

http://jsfiddle.net/FkMHw/1/

于 2012-10-01T13:57:27.160 に答える