个人中心
gpt4 book ai didi

javascript - Angular 如何重新计算变化？

转载 作者：行者123 更新时间：2023-12-02 15:59:51 25 4
gpt4 key购买 nike

我有以下函数计算，它接受四个参数并返回它们的乘积。我已经在其中设置了控制台日志。

  • 当我第一次更改 num_1 时，计算函数会被调用一次。
  • 当我第一次单击 num_2 时，函数计算被调用一次。
  • 当我更改 num_2 时，计算函数会被调用三次。
  • 当我更改 num_3 时，该函数被调用两次。
  • 当我更改 num_4 时，该函数会被调用两次。
  • 当我再次更改 num_1 时，该函数会被调用三次。

我在控制台中放置了一个日志来记录函数调用的次数。我是 AngularJS 的初学者。请解释为什么该函数被调用如此多次，它是否依赖于其他函数 scale_by_2 和 scale_by_4

<!DOCTYPE html>
<html lang="en-US">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>

    <body>
    <div ng-app="myApp">
        <div ng-controller="calculateController as calc">
        <p> Number 1 : <input type="num" min="1" ng-model="calc.num_1"></p>
        <p> Number 2 : <input type="num" min="1" ng-model="calc.num_2"></p>
        <p> Number 2 : <input type="num" min="1" ng-model="calc.num_3"></p>
        <p> Number 4 : <input type="num" min="1" ng-model="calc.num_4"></p>
         {{ calculate(calc.num_1, calc.num_2, calc.num_3, calc.num_4) }}
        <p> Scale by 2 : {{ scale_by_2(calc.num_1, calc.num_2, calc.num_3, calc.num_4) }} </p>
        <p> Scale by 2 : {{ scale_by_4(calc.num_1, calc.num_2, calc.num_3, calc.num_4) }} </p>
        </div>
    </div>
    </body>
    <script>
     var app = angular.module('myApp', ['ngRoute']);

     app.controller('calculateController', ['$scope', function($scope) {
     $scope.num_1 = 1;
     $scope.num_2 = 1;
     $scope.num_3 = 1;

     $scope.calculate =  function(num_1, num_2,num_3,num_4) {
         $scope.product = num_1 * num_3 * num_4 ;
         console.log(num_1);
         return num_1 * num_2;
     }

     $scope.scale_by_2 =  function(num_1, num_2,num_3,num_4) {
         num = $scope.product;
         return num * 2;
     }

     $scope.scale_by_4 =  function(num_1, num_2,num_3,num_4) {
         num = $scope.product;
         return num * 4;
     }
     }]);
    </script>
</html>

最佳答案

Angular 通过运行其摘要周期来更新您在前端看到的值。在摘要周期中， View 中调用的函数可能会被多次调用，通常直到 Angular 确定您的值已经稳定为止。

来自Angular's docs on $digest() :

Processes all of the watchers of the current scope and its children. Because a watcher's listener can change the model, the $digest() keeps calling the watchers until no more listeners are firing. This means that it is possible to get into an infinite loop. This function will throw 'Maximum iteration limit exceeded.' if the number of iterations exceeds 10.

如果不深入研究示例的摘要循环，很难解释为什么 Angular 会调用您的方法那么多次，但这绝对是可以预料的。这就是为什么避免在 View 中调用太多函数很重要 - 每次 View 更改时，所有这些函数都将至少被处理一次。

关于javascript - Angular 如何重新计算变化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31295422/

25 4 0
文章推荐： javascript - 如何将变量传递给 createjs Tween 函数
文章推荐： javascript - Grails 使用 gsp 片段作为 javascript 函数的 html 模板
文章推荐： angularjs - 使用Grails和Spring Security进行后端时的 Angular 前端身份验证
文章推荐： javascript - ReactJS 在渲染状态下循环
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com