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

Question

我有一个购物车的精美动画，它将购物车图标从产品移动到顶 Angular ，并且它将使用 angularJS 在柜台上执行 +1 操作。然而，当动画购物车到达顶部时，计数器已经+1。如果我能够延迟 angularJS 计数器，以便在动画完成时添加它，那就太棒了。

HTML

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

JS

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();
              });
            });
          });
        });
      });
    });
  };
}

AngularJS

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

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

解决方案

使用$timeout()

var kvv = angular.module('kvv', ['ngStorage']);
kvv.controller('CartController', function($scope, $localStorage, $sessionStorage) {


    $scope.addToCart = function(index, title, desc, price, timeout) {
        var found = false;
        angular.forEach($localStorage.items, function(items) {
            if (items.id  === index) {
              $timeout(function() {(items.quantity++)}, 500);
              found = true;
            }
        });
        if (!found) {
           $timeout(function() {$localStorage.items
           .push(angular.extend({
             id: index,
             title: title,
             quantity: 1,
             price: price}, index))},500);
        }
      };
});

Answer 1

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