javascript - 防止 Firebase 刷新时重置变量值

Question

我在 JavaScript 中创建了一个简单的 click 事件，当单击按钮时，变量 i 会添加 150 的值。然后我将其发送到 firebase。但是，当我刷新索引页面并再次单击按钮时，Firebase 中的值会再次在 0 处重新启动。

我需要更改哪些代码？

var myDataRef = new Firebase('https://***.firebaseIO.com');
var i = 0;

$('.btn').click(function() {
   i = i + 150;
   myDataRef.set({value: i});
});

$('.progress-bar').css({ 'width' : i});

$(document).ready(main);

Answer 1

当前，您在页面加载时将 i 初始化为 0。

您还应该从 Firebase 获取值，您可以使用以下方法:

myDataRef.child('value').once('value', function(snapshot) {
    i = snapshot.val();
});

如果将其与现有代码结合起来并稍微清理一下，它就会变成:

var myDataRef = new Firebase('https://***.firebaseIO.com');

var i = 0;
$('.progress-bar').css({ 'width' : i});  

myDataRef.child('value').on('value', function(snapshot) {
    i = snapshot.val();
    $('.progress-bar').css({ 'width' : i});
});

$('.btn').click(function() {
   myDataRef.set({value: i + 150});
});

$(document).ready(main);

请注意，我给出的初始代码段使用 once('value')，而这里我们使用 on('value'。这意味着最新的代码实际上会继续监听从 Firebase 获取更新的值，这通常是您想要的。

所以这里的初始流程是:

1. 将 i 初始化为 0 并绘制进度条
2. 您开始监听来自 Firebase 的值
3. 您开始监听点击事件
4. 在某个时刻，Firebase 会发出一个新值，
5. 更新i和进度条

然后当用户单击按钮时:

• 您更新 Firebase 中的值，这会触发上述步骤 4 和 5