CODEWITHSUNDEEP
javascriptangularjs
smanhoff
smanhoff

Reputation: 466

Cancel timeout during editing

I am using AngularJS to show a list of products. User can add products to this list and then it gets updated by a timeout function which loads the $scope.products each second. But these products can also be edited but because of the timeout the user only gets 1 second or less to edit the product. So when he clicks the product the edit it the timeout should been canceled until the product is edited...

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


}])

How can this best be accomplished?

Upvotes: 0

Views: 59

Answers (3)

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

You can simply do the following

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

Upvotes: 0

azaviruha
azaviruha

Reputation: 897

I think, you can set flag (e.g. isEdit=true), when user starts to edit product, and check this flag in your intervalFunctionMenu function.

Upvotes: 0

Shamil Yakupov
Shamil Yakupov

Reputation: 5469

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

Docs
Also look into $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();    


}])

Upvotes: 2

Related Questions