Javascript 如何延迟计数器直到动画完成

我有一个奇妙的购物车动画，它将购物车图标从产品移动到上角，它会在柜台上用angularJS做+1。但是，当动画购物车到达顶部时，计数器已为+1。如果我能够延迟angularJS计数器，以便在动画完成时添加它，那就太棒了

HTML

<li>({{orderTotal()}}) <i id="cart" class="fa fa-shopping-cart"></i> Order </a></li>

AngularJS

function flyToElement(flyer, flyingTo) {
  if (jQuery(window).width() > 767) {

    var $func = $(this);
    var divider = 1;
    var flyerClone = $(flyer).clone();
    $(flyerClone).css({position: 'absolute', top: $(flyer).offset().top + "px", left: $(flyer).offset().left + "px", opacity: 1, 'z-index': 1000});
    $('body').append($(flyerClone));

    var gotoX = $(flyingTo).offset().left + ($(flyingTo).width() /2) - ($(flyer).width()/divider)/2-5;
    var gotoY = $(flyingTo).offset().top + ($(flyingTo).height() /2) - ($(flyer).height()/divider)/2-5;

    $(flyerClone).animate({
        opacity: 1.0,
        left: gotoX,
        top: gotoY

    }, 500,
    function () {
      $(flyingTo).fadeOut('fast', function () {
        $(flyingTo).fadeIn('fast', function () {
          $(flyerClone).fadeOut('fast', function () {
            $(flyerClone).fadeIn('fast', function () {
              $(flyerClone).fadeOut('fast', function () {
                $(flyerClone).remove();
              });
            });
          });
        });
      });
    });
  };
}

$scope.orderTotal = function(index) {
  var orderTotal = 0;
  angular.forEach($localStorage.items, function(items) {
    orderTotal += items.quantity;
  })
  return orderTotal;
};

我正在寻找一些关于如何做到这一点的建议。谢谢

解决方案

使用$timeout（）

---

动画应该使用css。在AngularJS中使用JQuery应该尽可能少，否则会使生活变得不必要的复杂。未来的维护将是一场噩梦

您可以使用动画指令来完成此操作，该指令根据动画状态添加和删除特定类，并将其与$watch组合以确定何时执行动画的最终状态（即删除元素，或附加最终类[ie.animation end]）。

可能就是您需要的

var kvv = angular.module('kvv', ['ngStorage'])
  .controller('CartController', function($scope, $timeout, $localStorage, $sessionStorage) {
    $scope.checked = false;
    $scope.addToCart = function(index, title, desc, price) {
      $scope.checked = true;
      var found = false;
      angular.forEach($localStorage.items, function(items) {
        if (items.id  === index) {
          $timeout(function() {
            (items.quantity++);
            $scope.checked = false;
          }, 500);
          found = true;
        }
      });
      if (!found) {
       $timeout(function() {
         $localStorage.items.push(angular.extend({
           id: index,
           title: title,
           quantity: 1,
           price: price}, index))
       },500);
      }
    };
  });

---

在angular中，数据在事件执行时被绑定。与该数据绑定的任何内容都将显示数据的当前状态。您应该将jQuery或jqlite移动到Angular中的某种形式的服务中，并在函数嵌套或链接的末尾使用$apply，或者将其包装到前面提到的$watch中。有关$apply和$watch的详细信息。或者使用相同的策略在jQuery中完成整个任务。问题归结为分别使用两个DOM工具。您完全可以将它们一起使用。

您可以尝试在购物车到达目的地时广播“事件”，并在您的

orderTotal的角度脚本中使用
$on（event）
，我已经尝试过了，但似乎无法使其正常工作。通过这些例子，我发现它们会启动一个循环并使我的浏览器崩溃。在de angurlarjs部分中，我尝试在返回和计数器结束之间设置一个超时；超时不是一个函数。此外，这可能会增加计数时的延迟。它应该在计数完成时创建一个超时，以便购物车动画可以在总数更新之前完成。顺便说一句我还向ngcontrollerUpdated再次添加了$timeout。你能创建一个plnkr吗？我不确定是否理解您要搜索的内容。请确保所有操作都正确。我在本地主机和plunkr（在plnkr上我删除了存储依赖项）上没有收到任何错误。请检查您的项目，检查它是否工作，如果它返回
TypeError:Cannot read属性“push”of undefined
，如果在您单击按钮500毫秒后
checked
设置为
false
。如果是这样，请像我们所做的那样让
$timeout
工作。
var kvv = angular.module('kvv', ['ngStorage'])
  .controller('CartController', function($scope, $timeout, $localStorage, $sessionStorage) {
    $scope.checked = false;
    $scope.addToCart = function(index, title, desc, price) {
      $scope.checked = true;
      var found = false;
      angular.forEach($localStorage.items, function(items) {
        if (items.id  === index) {
          $timeout(function() {
            (items.quantity++);
            $scope.checked = false;
          }, 500);
          found = true;
        }
      });
      if (!found) {
       $timeout(function() {
         $localStorage.items.push(angular.extend({
           id: index,
           title: title,
           quantity: 1,
           price: price}, index))
       },500);
      }
    };
  });