使用 Firefox 打开确认对话框时显示“$apply already in Progress”

我（有时）变得很奇怪$申请已在进行中在以下看似无辜的情况下打开确认对话框时出错：

var mod = angular.module('app', []);

mod.controller('ctrl', function($scope, $interval, $http) {
  
  $scope.started = false;
  $scope.counter = 0;
  
  // some business function that is called repeatedly
  // (here: a simple counter increase)
  $interval(function() {
    $scope.counter++;
  }, 1000);
  
  // this function starts some service on the backend
  $scope.start = function() {
    if(confirm('Are you sure ?')) {
      return $http.post('start.do').then(function (res) {
        $scope.started = true;
        return res.data;
      });
    };
  };

  // this function stops some service on the backend
  $scope.stop = function() {
    if(confirm('Are you sure ?')) {
      return $http.post('stop.do').then(function (res) {
        $scope.started = false;
        return res.data;
      });
    };
  };

});

// mock of the $http to cope with snipset sandbox (irrelevant, please ignore)
mod.factory('$http', function ($q) {
  return {
    post: function() {
      return $q.when({data:null});
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="ctrl">
    <button ng-disabled="started" ng-click="start()">Start</button>
    <button ng-disabled="!started" ng-click="stop()">Stop</button>
    <br/><br/>seconds elapsed : {{counter}}
  </div>
</div>

错误消息是：

$rootScope:inprog] $apply 已在进行中http://errors.angularjs.org/1.2.23/ http://errors.angularjs.org/1.2.23/$rootScope/inprog?p0=%24apply

调用堆栈是：

minErr/<@angular.js:78:12
[email protected] /cdn-cgi/l/email-protection:12981:1
$RootScopeProvider/this.$get</[email protected] /cdn-cgi/l/email-protection:12770:11
[email protected] /cdn-cgi/l/email-protection:9040:25
[email protected] /cdn-cgi/l/email-protection:153:8
Parser.prototype.functionCall/<@angular.js:10836:15
ngEventHandler/</<@angular.js:19094:17
$RootScopeProvider/this.$get</[email protected] /cdn-cgi/l/email-protection:12673:16
$RootScopeProvider/this.$get</[email protected] /cdn-cgi/l/email-protection:12771:18
ngEventHandler/<@angular.js:19093:15
jQuery.event.dispatch@lib/jquery/jquery-1.11.2.js:4664:15
jQuery.event.add/elemData.handle@lib/jquery/jquery-1.11.2.js:4333:6

重现：

• 使用 Firefox（我无法使用 Chrome 或 IE 重现它）
• 打开 JavaScript 控制台
• 或者单击start and stop按钮（并确认对话框）
• 尝试多次（10-20x），不容易发生

如果我删除确认对话框，问题就会消失。

我读过了AngularJS 文档 https://docs.angularjs.org/error/%24rootScope/inprog关于此错误（以及其他 stackoverflow 问题），但我不知道这种情况如何适用，因为我不调用 $apply 也不直接与 DOM 交互。

经过一番分析，这似乎是 Firefox 中 $interval 和模式对话框之间令人惊讶的交互。

问题是什么 ？

调用堆栈显示了一些奇怪的东西：一个 AngularJS 函数tick在控制器内调用start功能。这怎么可能？

嗯，看来Firefox 在显示模式对话框时不会暂停超时/间隔功能 http://bytes.com/topic/javascript/answers/465001-modal-dialog-doesnt-threads-sleep-firefox：这允许调用配置的超时和间隔回调在当前执行的 javascript 代码的顶部.

在上述情况下，start函数被调用时带有$apply序列（当单击按钮时由 AngularJS 启动）以及当$间隔回调在顶部执行start函数，第二个$apply序列启动（由 AngularJS）=> 繁荣，$apply 已在进行中错误被提出。

一个可能的解决方案

定义一个新的confirm服务（改编自this http://www.bennadel.com/blog/2808-asking-the-user-to-confirm-location-or-route-changes-in-angularjs.htm and that http://www.bennadel.com/blog/2632-creating-asynchronous-alerts-prompts-and-confirms-in-angularjs.htm博客文章）：

// This factory defines an asynchronous wrapper to the native confirm() method. It returns a
// promise that will be "resolved" if the user agrees to the confirmation; or
// will be "rejected" if the user cancels the confirmation.
mod.factory("confirm", function ($window, $q, $timeout) {

    // Define promise-based confirm() method.
    function confirm(message) {
        var defer = $q.defer();

        $timeout(function () {
            if ($window.confirm(message)) {
                defer.resolve(true);
            }
            else {
                defer.reject(false);
            }
        }, 0, false);

        return defer.promise;
    }

    return confirm;
});

...并按以下方式使用它：

// this function starts some service on the backend
$scope.start = function() {
  confirm('Are you sure ?').then(function () {
    $http.post('start.do').then(function (res) {
      $scope.started = true;
    });
  });
};

// this function stops some service on the backend
$scope.stop = function() {
  confirm('Are you sure ?').then(function () {
    $http.post('stop.do').then(function (res) {
      $scope.started = false;
    });
  });
};

该解决方案之所以有效，是因为模式对话框是在间隔的回调执行内打开的，并且（我相信）间隔/超时执行是由 javascript VM 序列化的。