Angularjs 处理力矩JS（角度）有困难

我在瞬间JS上遇到了麻烦。基本上，我有一些电台的元数据，在我的php调用中，我得到了歌曲的“持续时间”，歌曲开始时的“时间戳”

我用MomentJS做了一些计算，得到了歌曲结束的时间，然后我发现了差异。然而，差异是返回一个负数，这将中断应用程序

如果有人能帮我，那就太好了

这是我的礼物

服务

angular.module('starter', [])

.run(function(CurrentTrack){
   CurrentTrack.refreshTrackData();
})

.controller('radioCtrl', function($scope,CurrentTrack) {  
   console.log(CurrentTrack);
   $scope.CurrentTrack = CurrentTrack;  
})

.service('CurrentTrack',function(radioData,$timeout){

   var currentTrack = this;

   this.setTrackData = function(trackData){

      currentTrack.coverUrl = trackData.cover_url;
      currentTrack.title = trackData.title;
      currentTrack.artist = trackData.artist;
      currentTrack.duration = moment.duration(parseInt(trackData.duration));
      currentTrack.startedAt = moment.unix(trackData.timestamp);
      currentTrack.finishesAt = moment(this.startedAt.add(this.duration));
      currentTrack.updateIn = this.finishesAt.diff(moment());

      currentTrack.refreshing = false;
      return currentTrack.updateIn;
   }

   this.refreshTrackData = function(){
      currentTrack.refreshing = true;
      return radioData.refresh()
         .then(currentTrack.setTrackData.bind(currentTrack))
         .then(currentTrack.scheduleUpdate);
   }

   this.scheduleUpdate = function(ms){
      console.log(ms)
      $timeout(function(){
         currentTrack.refreshTrackData()
      },ms);
      return;
   }  
})

工厂

.factory('radioData', function($http,$timeout) {
   var retries = 0;

   function parseResponse(response){
      retries = 0;
      if(!response.data.results){
         console.log('no results')
         return false;
      }
      console.log('refreshed...')
      return response.data.results[0];
   }

   function makeRequest(){
      console.log('refreshing...')
      return $http.get('http://radio-sante-animale.fr/blah11.php?  callback=jsonpCallback')
   }

   function retry(errResponse){
      console.error('timed out');
      //wait for a sec
      retries++;
      if(retries > 5){
         throw new Error('timed out after 5 attempts!');
      }
      //oops
      return $timeout(makeRequest,1000).then(null,retry);
   }

   var radioData = {
      refresh: function() {
         return makeRequest()
           .then(null,retry)
           .then(parseResponse)
           .catch(function(err){
               console.log(err);
           });
      }
   };
   return radioData;
});

从

如果该时刻早于您要传递到的时刻 moment.fn.diff，返回值将为负值

您需要在差异中反转日期

编辑：像这样-

currentTrack.updateIn = moment().diff(this.finishesAt);

首先我改变了：

currentTrack.finishesAt = moment(this.startedAt.add(this.duration));

致：

在原始代码中，您正在对时间开始的

进行变异，然后进行克隆。我还将所有
this
更改为
currentTrack
，以使其更加一致

问题

当服务器保留的时间与客户端保留的时间存在差异时（不是因为您有任何相反的情况），错误就会显现出来

基本上，服务器会向您发送
trackData.timestamp
，您可以解析它并将其转换为一个瞬间，作为
开始时间。然后将
trackData.duration
更改为
moment.duration
并将其添加到
startedAt
时间，以获得
finishesAt
时间

如果客户端保持的时间比服务器的时间提前，则计算的
finishesAt
时间将早于实际歌曲结束时。一个夸张的例子更能说明这一点


var-app=angular.module（'app'，[]）；
app.controller（'myController'，函数（$scope，$timeout，$interval，Server）{
函数updateTime（）{
$scope.serverTime=moment（）.subtract（1，'s'）；
$scope.clientTime=moment（）；
}
函数refreshInfo（）{
Server.getSongInfo（）.then（parseInfo）.then（schedulefresh）；
};
函数parseInfo（trackData）{
$scope.songInfo=trackData；
var startedAt=trackData.timestamp；
$scope.finishesAt=时刻（startedAt）.add（trackData.duration，'ms'）；
$scope.updateIn=$scope.finishesAt.diff（矩（））；
返回$scope.updateIn；
}
函数schedulefresh（updateIn）{
if（updateIn<0）{
$scope.bugged=true；
}否则{
$scope.bugged=false；
}
$timeout（refreshInfo，updateIn）；
}
$scope.songInfo=“加载”；
updateTime（）；
刷新信息（）；
$interval（updateTime，1000）；
});
应用程序服务（'Server'，函数（$timeout，$interval）{
var song={
持续时间：5000
};
this.getSongInfo=函数（）{
返回$timeout（函数（）{return this.trackData}）；
};
函数nextSong（）{
this.trackData={
持续时间：歌曲，持续时间，
时间戳：矩（）。减去（1，'s'）
};
}
nextSong（）；
$interval（nextSong，song.duration）；
});
.container{
显示器：flex；
柔性流：行换行；
}
.第{
显示器：flex；
弯曲方向：行；
弹性流动：周围空间；
宽度：100%；
}
上校{
保证金：自动；
文本对齐：居中；
}
瑞德先生{
背景色：红色；
}

歌曲信息
{{songInfo}}
服务器
{{serverTime.format（“hh:mm:ss”）}
结束于
{{finishesAt.format（“hh:mm:ss”）}
更新
{{updateIn}}
客户
{{clientTime.format（“hh:mm:ss”）}
从我的角度来看，它通过在$timeout方法中添加Math.abs来工作

this.scheduleUpdate = function(ms) {
    console.log( 'update in :' + ms)
    $timeout(function() {
        currentTrack.refreshTrackData()
    }, Math.abs(ms));
    return;
}

那么问题是什么呢？基本上，由于某种原因“currentTrack.updateIn”返回一个负数，应用程序会变得疯狂和崩溃，我不明白为什么。你的plunker似乎工作正常。这个问题是一直存在还是只是偶尔失败？@DTing它实际上失败了很多-我想知道这是否与我使用的API有关，这个API有很多超时。但是，当我控制台记录this.startedAt&this.finishedAt时，它似乎是相同的，所以我想知道这是否“导致了某种问题。我觉得有一些不同步的问题正在发生，我认为“this.finishedAt”没有及时获得数据以便“updateIn”正常工作这是不正确的
this.finishesAt
几乎肯定要晚于
moment（）
，除非
currentTrack.startedAt=moment.unix（trackData.timestamp）有问题var a=力矩（[2007,0,29]）；var b=力矩（[2007,0,28]）；a、 diff（b）//86400000
a
晚于
b
a。diff（b）
为正，
此。finishesAt
晚于
矩（）
此.finishesAt.diff（矩（））
应为正值
moment（）.diff（this.finishesAt）
应该是负数。非常感谢您在这个算法上花时间帮助我。很清楚你想做什么，这对我帮助很大。我将研究你的程序，并继续确保这件事的工作正常。
this.scheduleUpdate = function(ms) {
    console.log( 'update in :' + ms)
    $timeout(function() {
        currentTrack.refreshTrackData()
    }, Math.abs(ms));
    return;
}