AngularJS：最常见的四个坑之一 - 发生 $apply 时出现错误
在使用 AngularJS 开发网站时，你可能会遇到一些棘手的问题。其中最常见的一个是在调用 $apply 方法时出现错误。这篇文章将详细解释 $apply 的作用，为什么会出错以及如何解决这个问题。
什么是 $apply？
在 AngularJS 中，$apply 方法用于让 AngularJS 知道应用中发生了变化。当你在应用程序的背后进行某些操作时，比如在回调函数中调用了某些方法或处理了某些事件，这些操作可能会改变应用程序的状态。
例如，当你将表单中的数据绑定到控制器或服务中时，当用户更改输入时，AngularJS 可以检测到该更改并更新应用程序中的数据。但是，如果你在 Web 页面的背后调用了一个非 AngularJS 函数或处理了某些事件，AngularJS 就不能自动检测到状态的更改。
这就是 $apply 方法派上用场的地方。当你调用 $apply 方法时，AngularJS 会开始一个循环，查找状态更改，并更新你的应用程序。
为什么会出现错误？
当你在 $apply 方法的回调函数中编写代码时，你的代码可能会触发另一个 $apply 调用。这就会导致错误。当两个 $apply 调用同时运行时，AngularJS 不知道应该如何更新应用程序的状态，并将抛出错误。
例如，在以下代码中：
-- -------------------- ---- -------
------------------------ -
---------------- - -------
------------------------
---
-------- ---------------- -
-- ---- ----
------------------------ -
-------------- - ----- ------- ---------------
---
-当 updateUser 函数完成时，它会触发另一个 $apply 调用，导致错误。
如何解决？
有几种方法可以解决这个问题。
- 使用 $timeout 代替 $apply
一个临时的解决方法是使用 $timeout 代替 $apply。$timeout 将在 AngularJS 循环中异步运行，从而避免同时调用两个 $apply。
-- -------------------- ---- -------
------------------------ -
---------------- - -------
------------------- -
------------------------
---
---
-------- ---------------- -
-- ---- ----
------------------------ -
-------------- - ----- ------- ---------------
---
-- 将 $apply 置于函数的最外层
另一种解决方法是将 $apply 置于函数的最外层。这样只会有一个 $apply 方法被调用。
-- -------------------- ---- ------- ------------------------ - ---------------- - ------- ------------------------ --- -------- ---------------- - -- ---- ---- -------------- - ----- ------- --------------- -
- 使用 $rootScope.$applyAsync
AngularJS 1.3 版本之后引入了一个新的方法 $rootScope.$applyAsync。这个方法类似于 $timeout，但是它不会在每个 $apply 调用之间创建一个 $timeout。
-- -------------------- ---- -------
------------------------ -
---------------- - -------
------------------------
---
-------- ---------------- -
-- ---- ----
--------------------------------- -
-------------- - ----- ------- ---------------
---
-这三种方法都可以避免使用两个 $apply 方法，并确保你的应用程序能够更新成功。
结论
当你在 AngularJS 应用程序中使用 $apply 方法时，一定要小心避免出现错误。了解为什么出现错误以及如何解决这个问题非常重要。通过遵循本文中提供的指导意义，你应该能够避免常见错误并保证应用程序的成功更新。
示例代码
本文的所有示例代码都可以在以下代码片段中找到：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
------- --------------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- --------- ----------- -
----------- - - ----- ------ --
-------------- - ---
-- ------ - - --- --------
---------------------- - ---------- -
------------------------ -
---------------- - -------
------------------- -
-------------------------------
---
---
-
-- ------ - - --- ----- -- ---------- -----
---------------------- - ---------- -
------------------------ -
---------------- - -------
-------------------------------
---
-
-- ------ - - --- ----------------------
---------------------- - ---------- -
------------------------ -
---------------- - -------
-------------------------------
---
-
----------------- - -------------- -
-- ---- ----
-- ------ -- ----- -- ----- ------ ------ ------- ------
-------------------------- -
-------------- - ----- ------- ---------------
-----
-
---
---------
-------
----- -----------------------
------------- - ------ ----- ------------
------- ----- -----------------
------- ----------------------------------- ---- ---- ------- -----------
------- ----------------------------------- ---- ---- ------- -----------
------- ----------------------------------- ---- ---- ------- -----------
------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677391d26d66e0f9aae4b70b