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

Question

我的家庭作业涉及使用 Firebase 并使用 moment.js 来更新火车到达的时间以及距离下一趟火车到达还剩多少分钟。除了自动更新火车到站时间和剩余分钟数之外，几乎一切都正常。我有一个想法，这会通过使用 Firebase 自动发生，但很明显我错过了一些东西 - 如果我刷新页面，就会显示正确的时间。

我无法让 jsfiddle 与 Firebase 一起使用，因此缺少 -

我还尝试了 $(document).ready(function() 来对整个代码和不同部分进行各种包装(几乎所有有意义的内容 - 此处不再枚举)。

我怀疑我需要执行 firebase.set()、firebase.update() 或 firebase.push() > 和那些 .vals() 的东西，但在沿着这些不同的路径徘徊并错过我的作业截止日期之前，我希望能得到一个指向正确方向的指针，非常感谢......

附:很高兴发布 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;   
  });

});