Question

编辑：//修复...和//以下代码中的错误评论显示答案

对于JavaScript专家来说，这可能是一件愚蠢而且显而易见的事情......但如果我能看清楚这一点，我会感到危险。

这是我的 t.js ：

var angularApp = angular.module('myApp', []);

angularApp.controller('mainController', ['$scope', '$http', '$log',
                                function ($scope,   $http,   $log) {
    $scope.version = angular.version;
    var ctime = new Date();
    $scope.ctime = ctime.getTime() / 1000;
    $http.get('http://127.0.0.1:8765/').then(
      function(res){
        $scope.stime = res['data']['server-time'] / 1000;
        // Fix goes here: $scope.skew = $scope.stime - $scope.ctime;
        },
      function(error){
        $log.warn('Unable to get time');});
    // Error here: this happens asynchronously to the $http.get!
    $scope.skew = parseFloat($scope.stime) - parseFloat($scope.ctime);
}]);

...和我的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>

...而且这里，大致显示了什么：

Browser time: 1445735550.067
Server  time: 1445735550.085
Time skew: NaN

运行此浏览器时，Chrome浏览器的开发人员工具JavaScript控制台上没有显示任何内容。（在本次研究期间，我在其中看到了很多其他类似错误的活动......所以我知道它确实显示了我的语法错误，依赖注入失败等等 - 当它们存在时）。

我在使用和不使用 parseFloat（）时尝试过此操作。（同样，对class =“ng-cloak”的调用是相关的......将它们取出虽然它们没有按预期工作但没有效果）。我从* / 1000 *（divisions）表达式中获得所需浮点表示的事实表明它们在代码中的这两个点处被视为数字。我尝试删除该部门并使用 parseInt（）而不是 parseFloat（）。

（虽然我不认为这与这个问题有关，这里提供这个时间服务的node.js“应用程序”：

// 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（）”。

那么我在这里出错了什么？

Answer 1

$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');
});

AngularJS：为什么即使它们正确显示我也能获得NaN？

1 个答案: