Javascript AngularJS：为什么即使它们显示正确，我也会因此得到NaN？_Javascript_Angularjs

Javascript AngularJS：为什么即使它们显示正确，我也会因此得到NaN？

javascript angularjs

Javascript AngularJS：为什么即使它们显示正确，我也会因此得到NaN？,javascript,angularjs,Javascript,Angularjs,编辑：修复//。。。和//下面代码中的错误注释显示了答案对于JavaScript专家来说，这可能是一件愚蠢而显而易见的事情。。。但如果我能知道这是怎么回事，我会很生气的这是我的t.js：。。。和我的HTML： <!DOCTYPE html> <html lang="en-us" data-ng-app="myApp"><head><title>Time Skew</title> <meta charset="UTF-

编辑：修复//。。。和//下面代码中的错误注释显示了答案

对于JavaScript专家来说，这可能是一件愚蠢而显而易见的事情。。。但如果我能知道这是怎么回事，我会很生气的

这是我的t.js：

。。。和我的HTML：

<!DOCTYPE html>
<html lang="en-us" data-ng-app="myApp"><head><title>Time Skew</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  </head><body>
        <header><nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a></div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
                </ul></div></nav></header>
        <div class="container">
            <div data-ng-controller="mainController">
                <div class="ng-cloak">Browser time: {{ctime}}</div>
                <div class="ng-cloak">Server &nbsp;&nbsp; time: {{stime}}</div>
                <div class="ng-cloak">Time skew: {{skew}}</div></div></div>
       <script src="//code.angularjs.org/1.4.7/angular.min.js"></script>
       <script src="t.js"></script>
    </body></html>

当我运行这个程序时，Chrome浏览器的开发者工具JavaScript控制台上没有显示任何内容。（在本次学习中，我看到了很多其他的错误活动……所以我知道它确实显示了我的语法错误、失败的依赖注入等等——当这些错误存在时）

我尝试了使用和不使用parseFloat（）的方法。（对class=“ng-clope”的调用也很重要……取出它们也没有效果，尽管它们也没有按预期工作）。事实上，我从我的*/1000*（除法）表达式中得到了所需的浮点表示，这表明它们在代码中的这两点被视为数字。我已经尝试删除除法并使用parseInt（）而不是parseFloat（）

（虽然我认为这与这个问题无关，但这里是node.js“application”，它提供了这个时间服务：

// tserver.js:
var http = require("http");
http.createServer(function (req, response) {
    var headers = {
        'Content-Type:': 'application/json',
        // Extra headers suggested by http://stackoverflow.com/a/29548846/149076
        // ... to resolve: "Control-Allow-Origin' header is present on the requested resource"
        // error from Angular.js $http.get() ...
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
        };
    response.writeHead(200, headers);
    var d = new Date();
    response.end(JSON.stringify({ 'server-time': d.getTime() }));
}).listen("8765");

…虽然很明显，我从“服务”中获得了一个有效的整数（或应该解析为整数的字符串）。（HTML中显示的值在几毫秒内与“ctime”的值一致）

在我发布这个问题时，我发现了许多关于JavaScript NaN结果的其他问题……这些问题在这里似乎都不适用。我甚至尝试添加$scope.tst=parseFloat（'12345.97'）-parseFloat（'12345.67'））；并将其添加到我的HTML中，得到了一个完全可预测的数字结果……我实际上使用了这些完整长度的数字，如图所示，以确保数字的大小不会出现奇怪的问题。我还尝试调用$scope.Xtime变量的“.toString（）”

那么，我在这里犯了什么错误呢？

$http

是异步的，您试图对请求完成之前不存在的变量使用

parseFloat

把你的计算结果放在承诺中

$http.get('http://127.0.0.1:8765/').then(function (res) {
    $scope.stime = res['data']['server-time'] / 1000;
    // can do calc here
    $scope.skew = parseFloat($scope.stime) - parseFloat($scope.ctime);
},function (error) {
    $log.warn('Unable to get time');
});

回答得好，比我快了几秒钟。Doh！按事件模型。必须。记住。JavaScript。is。隐式。多线程！@JimDennis不，它实际上是单线程的，但有些操作是异步的。好的。必须。记住。JavaScript。is。Executed。in。隐式。异步。事件。循环！顺便说一下，对parseFloat（）的调用在这种情况下是多余的（如我的编辑中所示）。我想应该使用某种绑定或监视…或设置回调函数来替换DOM中的文本，而不是使用{…}模板引用或其他东西。此修复程序有效，但我仍然得到ng斗篷应该修复的闪烁：(

// tserver.js:
var http = require("http");
http.createServer(function (req, response) {
    var headers = {
        'Content-Type:': 'application/json',
        // Extra headers suggested by http://stackoverflow.com/a/29548846/149076
        // ... to resolve: "Control-Allow-Origin' header is present on the requested resource"
        // error from Angular.js $http.get() ...
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
        };
    response.writeHead(200, headers);
    var d = new Date();
    response.end(JSON.stringify({ 'server-time': d.getTime() }));
}).listen("8765");

$http.get('http://127.0.0.1:8765/').then(function (res) {
    $scope.stime = res['data']['server-time'] / 1000;
    // can do calc here
    $scope.skew = parseFloat($scope.stime) - parseFloat($scope.ctime);
},function (error) {
    $log.warn('Unable to get time');
});