Javascript 调用回调函数后浏览器不呈现更新的值
我在动画之后使用回调函数，得到了一个我不理解的结果 读卡器的当前_状态应增加1，然后读卡器应向右移动，然后再重复3次 当我使用我的web检查器运行程序时，我看到在移动每个步骤之前，当前的_状态确实会增加。但是，在我的浏览器窗口中，我只在第一步中看到阅读器的文本更改值。所以当程序结束时，我在屏幕上看到读卡器文本中有一个2，但是读卡器当前的_状态的值实际上是5 更让我困惑的是，我四处修补，添加了一个随机按钮，附带了一个空的点击事件。点击此按钮将使当前_状态显示为屏幕上的读卡器文本。因此，如果我在程序运行时反复单击此按钮，它看起来非常完美 我不是在寻找一种完全不同的方法来实现这一点，因为这不是我的实际代码，只是一个示例来说明这个问题。在我的代码中，如果有可能解决这个问题，我会在动画之后使用angular和递归回调函数 提前谢谢，这让我发疯了 HTML:Javascript 调用回调函数后浏览器不呈现更新的值,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我在动画之后使用回调函数，得到了一个我不理解的结果 读卡器的当前_状态应增加1，然后读卡器应向右移动，然后再重复3次 当我使用我的web检查器运行程序时，我看到在移动每个步骤之前，当前的_状态确实会增加。但是，在我的浏览器窗口中，我只在第一步中看到阅读器的文本更改值。所以当程序结束时，我在屏幕上看到读卡器文本中有一个2，但是读卡器当前的_状态的值实际上是5 更让我困惑的是，我四处修补，添加了一个随机按钮，附带了一个空的点击事件。点击此按钮将使当前_状态显示为屏幕上的读卡器文本。因此，如果我在程序
{{reader.current_state}
$scope.apply（）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
});
}
}
}]);
var-app=angular.module（“都灵加普”，[]）；
应用程序控制器（“turingController”、[“$scope”、函数（$scope）{
$scope.reader={
当前状态：1，
}
$scope.run_程序=函数（）{
如果（$scope.reader.current_state<5）{
$scope.reader.current_state++；
$（“.reader”）.animate（{“left”：“+=50px”}，1000，function（）{
$scope.run_程序（）；
$scope.$apply（）；//仅添加了此行
});
}
}
}]);
为什么需要这样做？实际上angular有
观察者的概念，当你在做这种复杂的功能时，观察者需要深入观察变化，变化不是自动实现速度，而是可以手动添加/增强。嗯，是的。我能够重现这个问题。这里有一个JSFIDLE：太棒了，谢谢！出于好奇，您知道为什么触发空点击事件会有更新变量更改的效果吗？有一个观察者的概念。他们正在观察发生的任何变化或事件。因此，当您在DOM文档[在浏览器中]的任何位置单击时，它就是一个事件。Angular可以快速重新生成其完整的DOM。当使用代码更新变量时，观察者不会检测到任何更改或触发的事件。
.reader {
position: relative;
height: 50px;
width: 50px;
left: 0px;
font-size: 35px;
background-color: coral;
}
<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>
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
});
}
}
}]);