0

各項目を表示するためにテンプレートを読み込む必要があるクライアント側の JS アプリがあります。それらがメモだとしましょう。

問題は非同期部分にあります。テンプレートが一度だけ読み込まれるようにすることはできません。メモが関数を呼び出すたびにロードされますrender。

ここにいくつかのコードがあります：

var notes = [ {}, {}, {} ] // Some Note objects
notes.forEach( function( note ) {
    render( note )
}

// Have some variable to hold the template
var template

// Now on the render function
function render( note ) {

    // First, if the template exists, go straight to the next function
    if ( template ) {

        // The display function takes care of appending the note
        // to the body after applying datas on the template
        display( note )
    }
    else {
        // loadTemplate just loads the template in an ajax request
        // and executes the callback with the template as argument
        loadTemplate( function( data ) {

            // I fill in the template variable
            template = data

            // And I display the note since the template is available
            display( note )
        } )
    }
}

したがって、この場合、これを防ぐためのチェックがあっても、テンプレートの 3 倍の負荷がかかります。これは、3 つのテンプレートがそのまま他のテンプレートに移動するためだと思いますが、どうすればこれを防ぐことができますか?

ブラウザーがフリーズするため、sync ajax loading を使用したくありません。

編集：最後に、@ Managuのソリューションを少し変更して使用しました。

彼のループを使用する代わりに、よりエレガントな次のループを使用しました。

while ( backlog.length ) {
    display( backlog.shift() )
}
4

3 に答える 3

2 
var loadTemplate = function() {
    var promise = $.get( "/" );

    loadTemplate = function() {
        return promise;
    };

    return promise;
};

ここでは jQuery は必要ないことに注意してください。擬似コードとして記述します。deferred を提供する任意のライブラリを使用できます。

loadTemplate().then( function( data ) {

    // I fill in the template variable
    template = data

    // And I display the note since the template is available
    display( note )
} )
于 2012-04-27T23:01:45.490 に答える
1

テンプレートがロードされた後に実行する必要がある作業のバックログを保持している可能性がありますか? 基本的に、非同期性によって引き起こされるインピーダンスの不一致を滑らかにするためのキューです。

var template;
var backlog;

function render(note)
{
    if (template) {
        // Template already loaded, just display.
        display(note);
    } else if (backlog) {
        // Template being loaded, push work onto backlog.
        backlog.push(note);
    } else {
        // Template not being loaded yet.  Create backlog queue and launch request
        // to load template.
        backlog=[note];
        loadTemplate(function(loaded_template) {
            // Template finally came over the wire.  Save it, and then
            // work off the backlog.
            template = loaded_template;
            for (var note=backlog.shift(); 
                 backlog.length!=0;
                 note=backlog.shift())
            {
                display(note); 
            }
        } );
    }
}
于 2012-04-27T22:54:57.397 に答える
0

「ブラウザがフリーズしてしまうので、同期 ajax 読み込みは使いたくありません。」

sync ajax は、jQuery を使用して実行しようとした場合にのみブラウザーをフリーズします。Frame.jsは、まさにあなたが抱えている問題を解決するように設計されています。Frame でこの問題を解決するには複数の方法がありますが、いずれもある程度の同期と非同期の組み合わせが必要です。おそらく最も簡単な方法は次のとおりです。

Frame(function(next){
    loadTemplate(next);
});
Frame(function(next, data){ // data here is the value passed to loadTemplate's callback
    notes.forEach( function( note ) {
        template = data;
        display( note );
    });
    next();
});

テンプレートが何であるかわからず、メモごとに同じか異なる可能性がある場合は、代わりに次のようにします。

notes.forEach( function( note ) {
    Frame(function(next){
        loadTemplate(note.templateName, next); // next here is a callback to advance to the next Frame
    });
    Frame(function(next, template){
        display( note, template );
        next();
    });
});

これにより、テンプレートの同期が読み込まれますが、表示の更新は非同期になります。

于 2012-04-27T23:08:36.330 に答える