Question

我的家庭作业涉及使用Firebase并使用moment.js更新列车到达的时间以及下一班列车到达之前剩余的时间。几乎所有事情都有效，除了火车到达和剩余分钟的自动更新。我有一个想法，即这会通过使用Firebase自动发生，但很明显我错过了一些东西 - 如果我刷新页面显示正确的时间显示。

我无法让jsfiddle与Firebase一起工作，因此缺少 -

我还尝试了$(document).ready(function()围绕整个代码的不同部分和不同的部分（几乎所有有意义的部分 - 都不会在这里列举）。

我怀疑我需要firebase.set()，firebase.update()或firebase.push()和那些.vals()之类的东西，但是在沿着这些不同的路径漫步并错过我之前作业截止日期我希望指向正确的方向，非常感谢......

P.S。很高兴发布HTML / CSS不确定它是否合适

js代码在这里：

var trainSchedule = new Firebase("https://kittson-trains.firebaseio.com/");
function displayTime() {
 //var time = moment().format('hh:mm:ss a');
 var timeNow = moment().format('h:mm:ss a');
 $('#currentTime').html("Current Time Is:  " + timeNow);
 //$('#currentTime').append(time);
 setTimeout(displayTime, 1000);
 };
 displayTime();

//trainSchedule.remove();
$("#trainSubmit").on("click", function(){

    var newTrainName = $("#newTrainNameInp").val().trim();
    var trainDest = $("#trainDestInp").val().trim();        
    var trainFirstTime = $("#trainFirstInp").val().trim();
    var trainFreq = $("#trainFreqInp").val().trim();
    var newTrainData = {
        trainName: newTrainName,
        dest: trainDest,
        freq: trainFreq,
        nxt: trainFirstTime,
    }

    trainSchedule.push(newTrainData);

    $("#newTrainNameInp").val("");
    $("#trainDestInp").val("");
    $("#trainFirstInp").val("");
    $("#trainFreqInp").val("");
    //stay on this page
    return false;   
});

trainSchedule.on("child_added", function(childSnapshot, prevChildKey){

    var newTrainName = childSnapshot.val().trainName;
    var trainDest = childSnapshot.val().dest;
    var trainFirstTime = childSnapshot.val().nxt; 
    var trainFreq = childSnapshot.val().freq;   

    var trainFirstConverted = moment(trainFirstTime,"hh:mm");
    console.log(trainFirstConverted);

    var diffTime = moment().diff(trainFirstConverted, "minutes");
    console.log("DIFFERENCE IN TIME: " + diffTime); 

    var tRemainder = diffTime % trainFreq;
    console.log(tRemainder);

    var minutesTilTrain = trainFreq - tRemainder;
    console.log("MINUTES TILL TRAIN: " + minutesTilTrain);

    var nextTrain = moment().add(minutesTilTrain, "minutes");
    console.log("ARRIVAL TIME: " + moment(nextTrain).format("hh:mm"));

    $("#allTrains > tbody").append("<tr><td>" + newTrainName +
        "</td><td>" + trainDest +
        "</td><td>" + trainFreq +
        "</td><td>" + moment(nextTrain).format("hh:mm") +       
        "</td><td>" + minutesTilTrain + "</td></tr>"); 
});

Answer 1

我想首先说这是我第一次尝试回答这里的问题。我还很擅长编码，但希望我可以提供帮助。我将您的数据库查询移动到您的displayTime函数中，并将setInterval放在document.on ready函数中。存储表的div每秒都会清空和更新。我不确定这是否是不断更新时间的最佳方式，但我希望它有所帮助。

var trainSchedule = new Firebase("https://kittson-trains.firebaseio.com/");
var displayTime = function() {
  //var time = moment().format('hh:mm:ss a');
  var timeNow = moment().format('h:mm:ss a');
  $('#currentTime').html("Current Time Is:  " + timeNow);
  //$('#currentTime').append(time);
  trainSchedule.on("child_added", function(childSnapshot, prevChildKey){

    var newTrainName = childSnapshot.val().trainName;
    var trainDest = childSnapshot.val().dest;
    var trainFirstTime = childSnapshot.val().nxt; 
    var trainFreq = childSnapshot.val().freq;   

    var trainFirstConverted = moment(trainFirstTime,"hh:mm");
    console.log(trainFirstConverted);

    var diffTime = moment().diff(trainFirstConverted, "minutes");
    console.log("DIFFERENCE IN TIME: " + diffTime); 

    var tRemainder = diffTime % trainFreq;
    console.log(tRemainder);

    var minutesTilTrain = trainFreq - tRemainder;
    console.log("MINUTES TILL TRAIN: " + minutesTilTrain);

    var nextTrain = moment().add(minutesTilTrain, "minutes");
    console.log("ARRIVAL TIME: " + moment(nextTrain).format("hh:mm"));

    $('#allTrains > tbody').empty();
    $("#allTrains > tbody").append("<tr><td>" + newTrainName +
        "</td><td>" + trainDest +
        "</td><td>" + trainFreq +
        "</td><td>" + moment(nextTrain).format("hh:mm") +       
        "</td><td>" + minutesTilTrain + "</td></tr>"); 
  });
};

$(document).on('ready', function(){

  setInterval(displayTime, 1000);

  //trainSchedule.remove();
  $("#trainSubmit").on("click", function(){

    var newTrainName = $("#newTrainNameInp").val().trim();
    var trainDest = $("#trainDestInp").val().trim();        
    var trainFirstTime = $("#trainFirstInp").val().trim();
    var trainFreq = $("#trainFreqInp").val().trim();
    var newTrainData = {
        trainName: newTrainName,
        dest: trainDest,
        freq: trainFreq,
        nxt: trainFirstTime,
    }

    trainSchedule.push(newTrainData);

    $("#newTrainNameInp").val("");
    $("#trainDestInp").val("");
    $("#trainFirstInp").val("");
    $("#trainFreqInp").val("");
    //stay on this page
    return false;   
  });

});

如何让DOM自动更新 - Firebase问题

1 个答案: