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的更新值，这通常是您想要的。

所以这里的初始流程是：

您将i初始化为0并绘制进度条
您开始收听来自Firebase的值
您开始收听click个活动
某些时候，新值从Firebase到达，
更新i和进度条

然后当用户点击按钮时：

您更新Firebase中的值，该值会触发上面的步骤4和5

Answer 2

变量从0重新启动，因为您重新加载了页面代码，因此i = 0的初始化会再次执行。

为避免这种情况，你可以：

将i提取到另一个无法重新加载的文件中，使用它作为此文件范围外部的变量。
从当前的Firebase值中读取值

阻止变量值在Firebase中刷新时重置

2 个答案: