0

ユーザーがボタンをクリックして、xhr get リクエストを介してデータを取得できるページがあります。データが読み込まれて解析されている間、読み込み中のメッセージが表示され、準備ができたらデータに置き換えられます。私は dojo ライブラリを使用しているので、jQuery やその他のライブラリは含めません。

これは、私が使用しているセットアップの簡略化されたバージョンです。

HTML

<div id = "clickMe"> Click Me! </div>
<div id = "results" class = "hidden">
    Please wait while we retrieve the results
</div>

CSS

.hidden {display: none;}

Javascript

// Bind function to click me div
var clickMe = document.getElementById('clickMe');
clickMe.addEventListener('click', getResults, false);

function getResults () {
    // Display the loading message while results are retrieved
    var resultsDiv = document.getElementById('results');
    resultsDiv.classList.remove('hidden');

    // Get the data and parse it here using a standard dojo.xhrGet method
    var displayResults = getData();

    // Output data to resultsDiv, overwriting loading message
    resultsDiv.innerHTML = displayResults;
}

私が抱えている問題は、「非表示」クラスを削除して結果の div を表示する前に、getData 関数が完了するまで getResults 関数が常に待機することです。これは、データの処理中に遅延が発生した場合でも、ユーザーには読み込みメッセージが表示されず、取得されたデータのみが表示されることを意味します。ただし、アラートを途中で配置すると、機能が強制的に一時停止され、読み込みメッセージが表示されます。

function getResults () {
    // Display the loading message while results are retrieved
    var resultsDiv = document.getElementById('results');
    resultsDiv.classList.remove('hidden');

    // The loading message will be displayed if this alert is included
    alert ("Hello world!");

    // Get the data and parse it here using a standard dojo.xhrGet method
    var displayResults = getData();

    // Output data to resultsDiv, overwriting loading message
    resultsDiv.innerHTML = displayResults;
}

アラートを console.log に置き換えてみましたが、読み込みメッセージが表示されない状態に戻ります。また、読み込み中のメッセージを表示する際にコールバック関数としてデータを取得するように設定しようとしましたが、やはり何も表示されません。get リクエストを sync: true と sync: false に設定して試しましたが、やはりうまくいきません。

getData の待機中にロード中のメッセージが表示されるようにするにはどうすればよいですか?

編集：

これが getData 関数です。同期ありとなしの両方を試しました。

function getData() {
    var targetUrl = //some url;
    var restResponse;

    dojo.xhrGet({

        url: targetUrl,
        sync: true; // no difference when this is omitted

        load: function(result) {
            restResponse = result;
        }

    });

    // Parse the rest response - fairly long function so I won't paste it here
    var parsedResponse = parseResult(restResponse);

    return parsedResponse;
}
4

2 に答える 2

1

私のお勧めは、非同期コードと dojo/Deferred の書き方を学ぶことです。

の代わりにgetData、メソッドの名前をloadDataandに変更します

loadData: function() {
    return xhr('', {...}); // this returns a deferred
}

function getResults () {
    var resultsDiv = dom.byId('results');
    domClass.remove(resultsDiv, 'hidden');

    loadData().then(function(displayResults) {
        resultsDiv.innerHTML = displayResults;
    });        
}

http://dojotoolkit.org/reference-guide/1.9/dojo/Deferred.html

于 2013-07-24T13:28:55.983 に答える
0

jQuery で defereds と promises を使用できます

http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html . ajax リクエストを使用する場合は、このように連鎖できます (jQuery 1.8 以降)。

var promise1 = $.ajax("/myServerScript1");

function getStuff() {
    return $.ajax("/myServerScript2");
}

promise1.then(getStuff).then(function(myServerScript2Data){
  // Both promises are resolved
});
于 2013-07-24T14:29:16.953 に答える