角度异步时序答案

【问题标题】：Angular Asynchronous Timing角度异步时序
【发布时间】：2015-07-06 12:45:37
【问题描述】：

我正在制作一个更新列表，其中显示有关某些用户的 twitch 信息。它应该显示他们的徽标 a、名称以及他们是否在线。目前，我正在抓取通道并将它们放入三个数组中。一个包含所有频道信息的 Twitch 频道信息数组。一个包含在线用户的 display_name 的数组。一个包含离线用户的 display_name 的数组。

它目前有效，但只有在您按下开始按钮时才有效。为什么需要按钮？如何在没有按钮的情况下填充列表？

http://codepen.io/crosscris/pen/ZGEOor?editors=101

    var app = angular.module('FCCTwitchChecker', []);
    app.controller('FCCTwitchController', function() {
    var TwitchCheck = this;
    var FCCstreamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx","notmichaelmcdonald","RobotCaleb", "medrybw","comster404","brunofin","thomasballinger","joe_at_underflow","noobs2ninjas","mdwasp","beohoff","xenocomagain"];
        TwitchCheck.AllUsersChannelObjects = [];
    TwitchCheck.OfflineUsers = [];
    TwitchCheck.OnlineUsers = [];
        var BeginningURL= "https://api.twitch.tv/kraken/";
    FCCstreamers.forEach(function(streamer){
      var streamURLstring = BeginningURL + "streams/" + streamer + "?client_id=1234chrisclientid4321&callback=?";
      var channelURLstring = BeginningURL +"channels/" + streamer + "?client_id=1234chrisclientid4321&callback=?";
     $.ajax({
        type: "GET",
        dataType: "json",
        url: streamURLstring,
        success: function(result) {
          if(result.stream === null || result.error==="Not Found") {
            TwitchCheck.OfflineUsers.push(streamer);
          } else {
            TwitchCheck.OnlineUsers.push(streamer);
          }
        },
        error: function() {
          console.log("It failed");
        }
      });
      $.ajax({
        type: "GET",
        dataType: "json",
        url: channelURLstring,
        success: function(result) {
          if (result.error !== "Not Found") {
            TwitchCheck.AllUsersChannelObjects.push(result);
            if (result.logo === null) {
              TwitchCheck.AllUsersChannelObjects[TwitchCheck.AllUsersChannelObjects.length - 1].logo === "http://placehold.it/350x150";
            }
          }
        },
        error: function() {
          console.log("It failed");
        }
      });
    }); 
    TwitchCheck.showArray = function () {
      console.log(TwitchCheck.AllUsersChannelObjects);    
    }
    TwitchCheck.OnorOff = function(ChannelName) {
            if(TwitchCheck.OnlineUsers.indexOf(ChannelName.name) !== -1) {
        return "on";
      } else {
        return "off";
      }
    }    
  });

我得到了一个显示名称列表，其中一些显示名称不是有效的频道。我相信 ajax/angular 一直在尝试查找无效频道的信息，但我不确定。

【问题讨论】：

如果这是一个 Angular 应用，你应该使用 Angular $http 方法而不是 jQuery 的 $.ajax

标签： javascript angularjs asynchronous timing

【解决方案1】：

由于 jQuery http 调用在 Angular 摘要循环之外（它是一个异步调用），您需要在 success 回调中使用控制器中的 $scope.$apply() 手动运行该摘要循环。

在此处查看示例：http://codepen.io/anon/pen/oXgqGM

但是，正如 mcranston18 在评论中所建议的那样，最好使用 Angular 的 $http 服务而不是 jQuery，因为它负责范围消化，您不需要这样做自己动手。

【讨论】：

【解决方案2】：

这是因为 Angular 在其$digest 周期内根据差异更新其所有视图。

它使用一个循环检查它所有的孩子和它的孩子的孩子的孩子等等......所以它只在它知道有什么变化时才进行检查。

...但是它自动知道某些事情发生了变化的唯一方法是，如果该变化是由于 Angular 系统中的事件引起的。

现在，这些变化可能是如此神奇且隐藏得如此之好，以至于您从未注意到或考虑过它们。
这完全没问题。我们都去过那个地方，这意味着 ng 团队在隐藏这些复杂性方面做得很好，使体验变得无缝。

但是，从 Angular 外部获取数据或修改数据，然后从外部进入 Angular 的世界以查看 Angular 的值，这并不是 Angular 知道如何检查的。

当你按下按钮时它起作用的原因是因为它会导致一个隐藏事件，它告诉 Angular：“在这个事件运行之后（并且它的所有子例程都运行），做一个摘要并根据差异应用所有更改你找到了。”

那个（或类似的）是保持 Angular（以及 React 和 ...library-X）神奇的粘合剂。

为了让 Angular 满意，请使用 $http

【讨论】：