javascript - javascript函数完成

Question

我有以下几行代码。问题是函数 GetScore() 需要一些时间才能完成（大约 2 秒）。我想要做的是相应地设置分数标题。现在的问题是执行到第 3 行，并且分数是稍后某个时间的计算机。我怎么能“等待”得分准备好，只有执行第 3 行。

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

任何想法将不胜感激。

Answer 1

您可以尝试重构 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');
});

Answer 2

由于您使用的是 jQuery，因此您可以使用一种非常有效的模式来简化异步函数（通常是 ajax）的接口。

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

然后你可以做类似的事情

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

我强烈建议你阅读 jQuery 中的Deferred对象。

编辑：如果您没有执行 ajax 请求，而是使用setTimeout或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);
});

Answer 3

如果GetScore()是一个异步函数，它在完成之前不会停止执行（您的描述使它听起来像这样），那么在完成之前您不能暂停 javascript 执行。

您需要深入研究如何GetScore()实现的细节，并在 GetScore() 内部创建一个通知（回调），该通知（回调）将在实际完成时被调用。如果GetScore()使用 AJAX 来检索分数，那么核心 AJAX 实现将在实际完成时发出通知，您可以使用它来触发您自己的回调。