使用setTimeout节点jade express动态更新内容答案

【问题标题】：dynamically update content with setTimeout node jade express使用setTimeout节点jade express动态更新内容
【发布时间】：2014-10-25 22:21:57
【问题描述】：

您好，我是 node 新手，希望每秒动态更新 html 内容。我可以通过以下方式使用设置超时更新值，但是我必须刷新页面才能看到更改

var jade = require('jade');
var fs = require('fs');
var express = require('express');
var app = express();

function getName(currentName) {
    return currentName + " more hello world ";
}

function updateApp(data) {

    data.name = getName(data.name); // get desired text
    app.get('/', function(req, res){
        res.render("index", {data: data});
    });
    setTimeout(function() {updateApp(data)}, 1000); // schedule values update
}

app.set('views', __dirname+'/views');
app.set('view engine', 'jade');


var startValue = "hello world"
var data = {
    name: startValue
}
//start app
updateApp(data);

app.listen(3000);

在哪里

html
    head
        script(type='text/javascript').
            var data = !{data};
    body
        h1 
            text= data.name

是我的玉模板。有没有一种简单的方法来改变它，以便在不刷新页面的情况下显示更新的文本？

【问题讨论】：

我认为在尝试扩展自己的技能之前，您应该更多地了解 JavaScript 本身。您使用 setTimeout 错误。 setInterval 将是您的逻辑正在寻找的内容。此外，您正在使用异步函数，而无需等待它完成再继续。您需要以使用回调函数的方式构建代码，以便正确处理异步方法。就我个人而言，没有正当理由我不会真正使用任何 JS“库”。使用原生 JS 来实现 AJAX 非常简单。
@JonathanGray 你能推荐好的资源/教程吗？我已经使用了很多 javascript，但对节点和异步方法很陌生
我不能给你任何好的node资源，但是异步编程只需要一点点习惯。您必须记住，JS 在执行下一个命令之前不会等待异步命令完成。这使得 return 语句几乎毫无用处。您需要做的是使用回调函数作为异步函数的输入变量之一。然后当异步函数完成时，使用结果调用回调函数。对整个脚本执行此操作可能很乏味，因为链中的每个函数也必须处理回调。

标签： javascript node.js express pug

【解决方案1】：

Click here for my JSFiddle

function loadXMLDoc(url, method, callback) {
    var xmlhttp = window.XMLHttpRequest?xmlhttp=new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=function() {
          if (xmlhttp.readyState==4) {
              if(xmlhttp.status==200) {
              callback(xmlhttp.responseText);
              } else callback(false);
          }
      }
    xmlhttp.open(method,url,true);
    xmlhttp.send();
    }

var UpdateAlgo = function() {
    loadXMLDoc("http://ajax-url-here/", "POST",
        function(result) {
            if(result !== false) {
            document.getElementById("myDiv").innerHTML = result;
            }
        AfterUpdate();
        });
    }

var AfterUpdate = function() {
    window.setTimeout(function() {
        UpdateAlgo();
        }, 1000);
    }

AfterUpdate();

我想你应该可以从中学到一些东西

【讨论】：