AngularJS：能否获取$digest循环发起者？排查持续触发问题

嗨，我来帮你拆解这两个AngularJS的问题，结合实战经验给你具体的解决方案：

一、能不能获取$digest循环的发起者？ #

AngularJS本身没有原生API直接暴露$digest的发起者，但我们可以通过一些简单的hack手段来追踪调用来源，后面会具体说怎么实现。

二、为什么你的watch会触发持续$digest循环？ #

你在run阶段加的这段watch代码：

$rootScope.$watch((...args) => console.log('digest', args));

这里得先理清楚$watch的工作逻辑：Angular会把监听函数的返回值和上一次的结果做对比，如果两次不一样，就会认定数据变了，进而再次触发$digest循环。

按道理说，console.log的返回值是undefined，每次都是一样的，不该触发循环。那问题大概率出在其他地方：

• 可能你的应用里有某个$watch，它的监听函数每次返回新的引用类型（比如新对象、新数组），比如() => { return { id: 1 }; }——因为每次都是全新的对象引用，Angular会判定值发生了变化，反复触发digest。
• 或者有第三方库/自定义代码在间接调用$apply或$digest，比如用了原生setTimeout而不是Angular的$timeout，导致Angular无法正确管控异步流程，频繁触发digest。

三、如何追踪谁触发了$digest？ #

最直接的方法是重写$rootScope.$digest方法，在调用时打印调用栈，这样就能在浏览器控制台看到完整的调用链路，找到发起者：

angular.module('yourApp').run(['$rootScope', function($rootScope) {
  const originalDigest = $rootScope.$digest;
  $rootScope.$digest = function() {
    // 打印调用栈，控制台会显示所有调用过的函数
    console.trace('$digest 被以下代码触发：');
    // 调用原本的digest逻辑
    originalDigest.apply(this, arguments);
  };
}]);

另外，从AngularJS 1.3开始，还可以监听$digestStart事件，结合调用栈一起排查：

$rootScope.$on('$digestStart', function() {
  console.trace('$digest 开始执行');
});

四、关于无限循环的排查建议 #

虽然现在功能正常，但无限digest循环会浪费性能，时间久了可能导致页面卡顿，建议按以下步骤排查：

• 先移除你添加的那个watch，看看循环是否停止——排除这个watch本身的潜在问题（虽然理论上不会，但某些特殊浏览器环境可能有意外）。
• 检查所有$watch的监听函数，确保返回的是稳定值：不要在监听函数里创建新对象/数组，比如避免() => [1,2,3]这种写法，如果必须返回复杂类型，可以用$watchCollection或者自定义比较函数（用angular.equals来对比内容而非引用）。
• 排查所有异步操作，确认都是用Angular提供的API（$timeout、$interval），而非原生的setTimeout、setInterval——原生API不会自动触发digest，但如果有人手动调用$apply就会导致频繁触发。

内容的提问来源于stack exchange，提问作者Kindzoku