在函数中处理异步调用 (Firebase)

IT技术 javascript ajax asynchronous firebase
2021-03-04 05:16:53

现在有几次我遇到了使用 Firebase 的同步和异步函数的问题。我的问题通常是我需要在我编写的函数中进行异步 Firebase 调用。作为一个简单的例子，假设我需要计算和显示一个物体的速度，我的 Firebase 存储距离和时间：

function calcVelocity() {
    var distance, time, velocity;

    firebaseRef.once('value', function(snapshot) {
        distance = snapshot.val().distance;
        time = snapshot.val().time;

        velocity = distance / time;
    });
    return velocity;
}

$("#velocity").html(calcVelocity());

当然，上面的代码不会工作，因为firebaseRef.once()是异步调用，所以velocity我们到达时还没有设置return velocity;。如果我们将return放在.on()回调函数内部，则根本不会返回任何内容。

一种解决方案是使我的calcVelocity()函数也异步。

另一种解决方案是存储 Firebase 的缓存版本，该版本从 Firebase 同步读取但异步更新。

这些解决方案中的一个比另一个更好吗？有没有更好的解决方案？

3个回答

另一种方法是利用 Promise 策略。jQuery 有一个很棒的.

function calcVelocity() {
    var distance, time, velocity, def = $.Deferred();

    firebaseRef.once('value', function(snapshot) {
        distance = snapshot.val().distance;
        time = snapshot.val().time;

        def.resolve( distance / time );
    });
    return def.promise();
}

calcVelocity().then(function(vel) { $("#velocity").html(vel); });

还请记住，snapshot.val().distance;如果snapshot.val()返回 null ，则可能会返回错误！

至少不是。它使用在数据可用时解析的Promise。
2021-04-24 05:16:53
所以它类似于 $loaded in angularfire
2021-04-24 05:16:53
它使 calVelocity() 同步函数？
2021-05-20 05:16:53

您确定了两种可能性：要么使您的函数异步，要么缓存最新的 Firebase 数据，以便您可以同步访问它。考虑到您正在编写的应用程序的上下文，您使用哪一个只是偏好和方便的问题。

例如，我们注意到“动作游戏”通常由紧密的渲染循环驱动，而不是由 Firebase 数据更改事件驱动。因此，缓存最新的 Firebase 数据以在渲染循环中使用是有意义的。例如：

var latestSnapshot = null;
firebaseRef.on('value', function(snap) { latestSnapshot = snap; });

然后您可以在渲染循环（或其他任何地方）中同步使用 latestSnapshot，但您需要小心处理它为 null 直到第一个 firebase 回调发生。

好主意 - 我没想过只缓存快照。
2021-04-21 05:16:53
拯救了我的一天！4年后的事件！
2021-05-11 05:16:53

与@Kato 提供的答案相同的想法，但Firebase 中的内置Promise看起来像这样

function calcVelocity(snapshot) {
    var distance, time, velocity;

    distance = snapshot.val().distance;
    time = snapshot.val().time;

    return distance / time;
}

function getVelocity() {
return firebaseRef.once('value').then(calcVelocity);
}

getVelocity().then(function(vel) { $("#velocity").html(vel); });
好的！在 2012 年之后添加了一点Promise。进行了一次快速编辑，因为您过早地调用了 calcVelocity（具有未定义的值）。
2021-04-27 05:16:53
其它你可能感兴趣的问题
上一篇如何在 AngularJS 中监听单击并按住？ 下一篇为什么在keydown回调中返回false并没有停止按钮点击事件？