0

次のコード行があります。問題は、関数 GetScore() が完了するまでに時間がかかることです (約 2 秒)。私がやりたいのは、それに応じてスコアヘッダーを設定することです。現在の問題は、実行が 3 行目に進み、後でスコアが計算されることです。スコアの準備が整い、行 3 のみが実行されるのを「待つ」にはどうすればよいでしょうか。

$("#ScoreHeader").html('Calculating...');
score = GetScore();
$("#ScoreHeader").html('Done');

どんなアイデアでも大歓迎です。

4

3 に答える 3

4

GetScore をリファクタリングして、コールバック関数を受け取ることができます。

GetScore次のように定義します。

function GetScore(cb){
    var score = ... // the score calculation logic
    cb(score);
}

そして、あなたはすることができます

$("#ScoreHeader").html('Calculating...');

var score;
GetScore(function(data){
    score = data;
    $("#ScoreHeader").html('Done');
});
于 2013-08-05T03:04:12.140 に答える
0

jQuery を使用しているため、非同期関数 (通常は ajax) のインターフェイスを簡素化するために使用できる非常に効率的なパターンがあります。

function getScore() {
    return $.ajax({...}); //$.ajax returns a promise/deferred object
}

次に、次のようなことができます

getScore().done(function (score) {
});

jQueryのDeferredオブジェクトについて読むことを強くお勧めします。

編集: ajax リクエストを実行していないが、代わりにsetTimeoutorを使用setIntervalしてデータを非同期的に処理する場合でも、Deferredオブジェクトを使用できます。

これは、非同期的に値を合計し、クライアント コードが制御フローを効率的に処理できるようにするオブジェクトを返す関数がある例です。Deferred

function sumValuesAsync(values) {
    var deferred = arguments[1] || $.Deferred(),
        i = arguments[2] || 0,
        sum = arguments[3] || 0;

    sum += values[i];

    if (++i === values.length) {
        deferred.resolve(sum); //notice observers that the process is completed
    } else {
        setTimeout(function () {
            sumValuesAsync(values, deferred, i, sum);
        }, 500);
    }

    return deferred;
}

sumValuesAsync([1, 1, 1, 1]).done(function (total) {
    console.log(total);
});
于 2013-08-05T03:13:49.273 に答える
0

GetScore()それが完了するまで実行を停止しない非同期関数である 場合（説明では、そのように聞こえます）、完了するまでJavaScriptの実行を一時停止することはできません。

実装方法の詳細を掘り下げて、GetScore()実際に完了したときに呼び出される GetScore() 内に通知 (コールバック) を作成する必要があります。AJAX を使用してスコアを取得する場合GetScore()、コア AJAX 実装は実際に完了したときに通知を受け取り、それを使用して独自のコールバックをトリガーできます。

于 2013-08-05T03:16:46.553 に答える