AngularJS函数执行问题——需要延迟第二个函数的执行

AngularJS function Execution Issue -- Need to delay execution of second function

本文关键字:执行 函数 第二个 延迟 问题 AngularJS      更新时间:2023-09-26

我正在构建一个小实用程序来处理AngularJS中的用户购物车。

下面是我的cart-service.js文件定义。

var myStoreCartService = angular.module("myStoreCartService", []);
myStoreCartService.factory('Cart', function() {
    var userCart=[];
    var cartSummary=[];
    return{
        addItemToCart: function(item) {
            userCart.push(item);  
        },  
        retrieveCart: function(){
            return userCart;
        },
        getCartSummary: function(){
            cartSummary=[];
            for (var key in userCart){
                var currentItem={"productname":"","price":""};              
                if (userCart.hasOwnProperty(key)){                      
                    currentItem["productname"]=userCart[key].productname;
                    currentItem["price"]=userCart[key].price;
                    cartSummary.push(currentItem);
                    continue;
                };
            }
            return cartSummary;
        },
        getCurrentTotal: function(){
            alert("Sum function called "+ cartSummary);
            var currentSum=0;
                for (var key in cartSummary)
                {  
                    if (cartSummary.hasOwnProperty(key))
                    {    
                        // get sum     
                        currentSum = currentSum+parseInt(cartSummary[key].price);
                        alert(currentSum+" is current sum")
                        continue;
                    };
                }
            return currentSum;
        }
    }
});

下面是更新购物车页面的方法。(在页面控制器中定义)

function addItemToCartHelper(data){
  Cart.addItemToCart(data);  
  $scope.cart=Cart.retrieveCart();
  $scope.cartLength=$scope.cart.length;
  $scope.userCartSummary=Cart.getCurrentTotal();
  $scope.userCartSummaryFromService=Cart.getCartSummary();
}

我的问题是我没有得到正确的总价格,我总是得到少一个项目加到我的价格。

我确实意识到,我的计算总费用的函数应该只在我的购物车摘要更新之后运行,但在我的例子中,它在购物车摘要更新功能启动之前运行。

我需要一种方法来确保购物车摘要在总计函数运行之前已经完成执行。

对于你提到的情况,你可以使用的最佳方法是Angularjs提供的Promise API ($q)服务。它用于同步、异步任务。就像你的例子

Promise API用于在满足条件时履行承诺,即解决或拒绝。

你可以使用。then从deferred对象创建的promise使用$q.defer()
示例:

var deferredObject = $q.defer();
var deferredPromise = deferredObject.promise;
deferredPromise.then(successCallback,errorCallback);
deferredObject.resolve() // Calls the successCallback
deferredObject.reject() // Will call errorCallback

点击链接- http://andyshora.com/promises-angularjs-explained-as-cartoon.html