Question

我在动画后使用回调函数，我得到的结果是我不明白。

读者的current_state应该增加1，然后读者应该向右移动，然后再重复3次。

当我使用网络检查器运行程序时，我发现在移动每一步之前current_state确实增加了。但是，在我的浏览器窗口中，我只在第一步中看到了读者的文本更改值。所以当程序结束时，我在屏幕上的阅读器文本中看到2，但是阅读器的current_state的值实际上是5。

为了让我更加困惑，我正在修修补补并添加一个随机按钮，其中附有一个空的点击事件。点击此按钮将使current_state在屏幕上显示为阅读器的文本。因此，如果我在程序运行时反复单击此按钮，它看起来很完美。

我不是在寻找一种完全不同的方式，因为这不是我的实际代码，只是一个例子来说明问题。在我的代码中我试图坚持如果可以解决这个问题，可以在动画后使用angular和递归回调函数。

先谢谢，这让我发疯了！

https://jsfiddle.net/snookieordie/ns09cvqc/7/

var app = angular.module("turingApp", []);

app.controller("turingController", ["$scope", function ($scope) {
    $scope.reader = {
        current_state: 1,
    }

    $scope.run_program = function() {
        if($scope.reader.current_state < 5) {
            $scope.reader.current_state++;
            $(".reader").animate({"left": "+=50px"}, 1000, function() {
                $scope.run_program();
            });
        }
    }
}]);

CSS：

.reader {
    position: relative;
    height: 50px;
    width: 50px;
    left: 0px;
    font-size: 35px;
    background-color: coral;
}

HTML：

<body ng-app="turingApp" ; ng-controller="turingController">
    <div class="reader">{{reader.current_state}}</div>
    <br/><br/>
    <input type="button" class="code_submit" value="Run Code" ng-click="run_program()" /> 
    <br/><br/>
    <input type="button" value="Empty Click Event" ng-click="" />
</body>

Answer 1

在调用动画回调功能后立即使用$scope.apply()，我已编辑 js代码

var app = angular.module("turingApp", []);

app.controller("turingController", ["$scope", function($scope) {

  $scope.reader = {
    current_state: 1,
  }

  $scope.run_program = function() {

    if ($scope.reader.current_state < 5) {

      $scope.reader.current_state++;
      $(".reader").animate({"left": "+=50px"}, 1000, function() {
        $scope.run_program();
        $scope.$apply(); // Have added this line onlye
      });
    }
  }

}]);

为什么需要这样做？实际上有角度watchers概念，当你做这种复杂的功能时watchers需要保持深入的眼光关于变量的变化，它不会自动实现速度，但可以手动添加/增强。

调用回调函数后，浏览器不呈现更新的值

1 个答案: