在编辑过程中取消超时

Cancel timeout during editing

本文关键字：超时 取消 过程中 编辑      更新时间：2023-09-26

我正在使用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();    

}])

如何才能最好地做到这一点？

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

文档
还要研究$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();    

}])

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

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

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
相关文章：