AngularJS 如何解决 $apply 正在进行中？-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，当我们访问一个 Scope 时，AngularJS 会自动帮我们进行脏检查，以确保 DOM 和 Scope 中的数据保持同步。然而，在执行某些操作的过程中，AngularJS 可能会遇到 $apply 正在进行中的情况，这会导致我们无法在当前的 $apply 中更新 Scope。

本文将介绍 AngularJS 如何解决 $apply 正在进行中的问题，并给出一些示例代码来帮助读者更好地理解这个问题。

$apply 正在进行中的问题

在 AngularJS 中，$apply 是用来通知 AngularJS 更新视图的方法。当我们在 AngularJS 应用中进行一些操作时（比如点击按钮、获取异步数据等），AngularJS 会调用 $apply 来更新视图。如果我们在 $apply 正在进行中时尝试再一次调用 $apply，就会发生 $apply 正在进行中的问题。

例如，如果我们在点击按钮时调用了一个函数，并在该函数中调用了另一个函数，而该函数又调用了 $apply，就会出现 $apply 正在进行中的问题：

// javascriptcn.com 代码示例
function onClick () {
    doSomething();
}

function doSomething () {
    $scope.$apply(function () {
        $scope.someData = "Hello, world!";
    });
}

在这个例子中，当我们点击按钮时，AngularJS 会调用 onClick 函数。在 onClick 函数中，我们调用了 doSomething 函数，而 doSomething 函数又调用了 $apply。因此，当 $apply 运行时，AngularJS 会给出警告，提示我们 $apply 正在进行中，无法更新 Scope。

解决 $apply 正在进行中的方法

为了解决 $apply 正在进行中的问题，我们需要使用 $evalAsync 方法。$evalAsync 方法会在当前 $apply 后立即执行，而不是导致嵌套的 $apply。这可以确保我们的 $apply 不会嵌套，从而避免 $apply 正在进行中的问题。

让我们重新编写上面的例子，使用 $evalAsync 方法来解决 $apply 正在进行中的问题：

// javascriptcn.com 代码示例
function onClick () {
    doSomething();
}

function doSomething () {
    $scope.$evalAsync(function () {
        $scope.someData = "Hello, world!";
    });
}

在这个例子中，我们使用了 $evalAsync 方法来代替 $apply。$evalAsync 方法会在当前的 $apply 结束后立即执行，这样我们就可以在不嵌套 $apply 的情况下更新 Scope。这就解决了 $apply 正在进行中的问题。

示例代码

下面是一个使用 $evalAsync 方法解决 $apply 正在进行中的问题的完整示例代码：

HTML：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS $apply 示例</title>
    <script src="//cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
    <h1>{{myData}}</h1>
    <button ng-click="onClick()">点击我</button>
</body>
</html>

JavaScript：

// javascriptcn.com 代码示例
var app = angular.module("myApp", []);

app.controller("MyCtrl", function ($scope) {
    $scope.myData = "Hello";

    $scope.onClick = function () {
        $scope.doSomething();
    };

    $scope.doSomething = function () {
        $scope.$evalAsync(function () {
            $scope.myData = "Hello, world!";
        });
    };
});

在这个示例中，我们创建了一个 AngularJS 应用，并在其中定义了一个控制器。控制器中定义了一个 myData 变量和一个 onClick 函数，用于点击按钮时调用 doSomething 函数。doSomething 函数会使用 $evalAsync 方法来更新 myData 变量。这样，我们就成功解决了 $apply 正在进行中的问题。

总结

在 AngularJS 中，$apply 是用来通知 AngularJS 更新视图的方法。当我们在进行某些操作时，AngularJS 会自动调用 $apply 来更新视图。然而，如果我们在 $apply 正在进行中时尝试再一次调用 $apply，就会发生 $apply 正在进行中的问题。为了解决这个问题，我们可以使用 $evalAsync 方法来代替 $apply。$evalAsync 方法会在当前的 $apply 结束后立即执行，从而避免嵌套 $apply，避免 $apply 正在进行中的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65437eda7d4982a6ebd4997b