我有以下代码:
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); }); });
调用webDataUrl和graphicDataUrl JSON并使用它们的数据以便在两个不同的div(#viewG和#viewW)中显示它们的最佳方法是什么?
最好的方法是单独执行每个操作,并处理错误情况:
$.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:
$.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 } });
…但是该页面的响应速度似乎较慢,因为您不会在第一个请求返回时更新,而只有在两者都更新时才更新。