Question

我正在使用AngularJS来显示产品列表。用户可以将产品添加到此列表中，然后通过超时功能更新产品，该功能每秒加载$ scope.products。但是这些产品也可以编辑，但由于超时，用户只需1秒或更短的时间来编辑产品。因此，当他点击产品进行编辑时，超时应该被取消，直到产品被编辑...

AngularJS

categorieFilter.controller("catFilter", ["$scope", "$http","$timeout", "store", function($scope,$http,$timeout,store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.removeproduct = function($prodid){
        $http.get('api/removeproduct/'+$prodid)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Product remove error: ", status, data);
        });    
    }; 
    $scope.postname = function ($prodid, $prodname){
        $timeout.cancel();
        $http.get('api/editproduct/'+$prodid+'/'+$prodname)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Product edit error: ", status, data);
        });    
    };   
    $scope.postprice = function ($prodid, $prodprice){
        $http.get('api/editproductprice/'+$prodid+'/'+$prodprice)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Productprice edit error: ", status, data);
        });    
    };       

    store.getCategories().then(function(data){
        $scope.categories = data;
    })
    store.getProducts().then(function(data){
        $scope.products = data;
    })    

    $scope.filterProductsByCats = function(category){
    $scope.search = category;
    };

// Function to replicate setInterval using $timeout service.
    $scope.intervalFunctionMenu = function(){
        $timeout(function() {
        store.getProducts().then(function(data){
        $scope.products = data;

        }); 
        $scope.intervalFunctionMenu();
        }, 1000)
    };

// Kick off the interval
    $scope.intervalFunctionMenu();    


}])

如何才能最好地完成这项工作？

Answer 1

var timeoutR = $timeout(...);
$timeout.cancel(timeoutR);

Docs
另请查看$interval。

categorieFilter.controller("catFilter", ["$scope", "$http","$timeout", "store", function($scope,$http,$timeout,store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.removeproduct = function($prodid){
        $http.get('api/removeproduct/'+$prodid)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Product remove error: ", status, data);
        });    
    };
var timeoutR; /* Added */
    $scope.postname = function ($prodid, $prodname){
        $timeout.cancel(timeoutR); /* I hope there is no way to get here without an timeout created */
        $http.get('api/editproduct/'+$prodid+'/'+$prodname)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Product edit error: ", status, data);
        });    
    };   
    $scope.postprice = function ($prodid, $prodprice){
        $http.get('api/editproductprice/'+$prodid+'/'+$prodprice)        
        .success(function(results){
        })
        .error(function(data, status){
            console.error("Productprice edit error: ", status, data);
        });    
    };       

    store.getCategories().then(function(data){
        $scope.categories = data;
    })
    store.getProducts().then(function(data){
        $scope.products = data;
    })    

    $scope.filterProductsByCats = function(category){
    $scope.search = category;
    };

// Function to replicate setInterval using $timeout service.
    $scope.intervalFunctionMenu = function(){
        timeoutR = $timeout(function() {/* Added */
        store.getProducts().then(function(data){
        $scope.products = data;

        }); 
        $scope.intervalFunctionMenu();
        }, 1000)
    };

// Kick off the interval
    $scope.intervalFunctionMenu();    


}])

Answer 2

您可以简单地执行以下操作

var timer; // Define globally or where both the following two lines can access

timer = $timeout( your_code_goes_here ); // Assign timeout to timer

$timeout.cancel( timer ); // Cancel timer at the desired event

Answer 3

我认为，当用户开始编辑产品时，您可以设置标记（例如 isEdit = true ），并在 intervalFunctionMenu 函数中检查此标记。

编辑期间取消超时

3 个答案: