12

私はこのコードを持っています:

var graphicDataUrl = 'graphic-data.json';
var webDataUrl = 'web-data.json';
var templateHtml = 'templating.html';
var viewG = $('#view-graphic');
var viewW = $('#view-web');

$.getJSON(dataUrls, function(data) {
    $.get(templateHtml, function(template) {
        template = Handlebars.compile(template);
        var example = template({ works: data });        
        viewG.html(example);
        viewW.html(example);
    }); 
});

2 つの異なる div (#viewG と #viewW) に表示するために、webDataUrl と graphicDataUrl の両方の JSON を呼び出し、それらのデータを使用する最良の方法は何ですか?

4

3 に答える 3

37

最善の方法は、それぞれを個別に実行し、エラー状態を処理することです。

$.getJSON(graphicDataUrl)
    .then(function(data) {
        // ...worked, put it in #view-graphic
    })
    .fail(function() {
        // ...didn't work, handle it
    });
$.getJSON(webDataUrl, function(data) {
    .then(function(data) {
        // ...worked, put it in #view-web
    })
    .fail(function() {
        // ...didn't work, handle it
    });

これにより、リクエストが並行して発生し、各リクエストが完了するとできるだけ早くページが更新されます。

リクエストを並行して実行したいが、両方が完了するまでページの更新を待つ場合は、次のように実行できます。$.when

var graphicData, webData;
$.when(
    $.getJSON(graphicDataUrl, function(data) {
        graphicData = data;
    }),
    $.getJSON(webDataUrl, function(data) {
        webData = data;
    })
).then(function() {
    if (graphicData) {
        // Worked, put graphicData in #view-graphic
    }
    else {
        // Request for graphic data didn't work, handle it
    }
    if (webData) {
        // Worked, put webData in #view-web
    }
    else {
        // Request for web data didn't work, handle it
    }
});

...しかし、最初のリクエストが戻ってきたときに更新しているのではなく、両方が戻ってきたときにのみ更新しているため、ページの応答性が低下しているように見える場合があります。

于 2013-09-26T11:02:17.153 に答える