Cancel Previous Ajax Request and Start New One in Angularjs - angularjs

Question

following solution is not working for me some how
How to cancel an $http request in AngularJS?
above solution effect - abort new ajax call also,it should be allow new ajax call and abort old ajax call
my code
$scope.callajax = function () {
var canceller = $q.defer();
var data = {};
data['id'] = id;
$http({
method: "post",
url: url,
data: $.param(data),
timeout: canceller.promise,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (response) {
});
canceller.resolve();
};
i am calling this function,if i call this function two time at a time then it should be abort first ajax call and fire new ajax call

Answer 1

The problem with your code is that the canceller.resolve() gets called and cancels the $http immediately. The following works by flagging if an ajax call is active and cancelling the call.
JSFiddle
var canceller,
isSending = false;
$scope.callajax = function () {
console.log("callajax");
if(isSending) {
canceller.resolve()
}
isSending = true;
canceller = $q.defer();
var data = {
html: "<p>Text echoed back to request</p>",
delay: 5
}
$http({
method: "post",
url: "/echo/html",
data: data,
timeout: canceller.promise
}).success(function (response) {
isSending = false;
console.log("success");
}).error(function(data, status) {
isSending = false;
console.log("error");
});;
};

Answer 2

Since, you have the cancelar object inside the function and also calling it, the callajax function will call and then cancel it everytime. To achieve what you want you should be trying something like this -
$scope.cancelHandles = [];
$scope.currentIndex=0;
$scope.callajax = function () {
var cancelar = $q.defer();
$scope.cancelHandles.push(cancelar);
//rest of your code goes here except the last line cancelar.resolve();
$scope.currentIndex = cancelHandles.length;
}
$scope.cancelAjaxCall = function(index) {
cancelHandles[index].resolve();
}
The function call - callajax shall be returning the index in the array of cancel handlers which will map to the number of time you have called the ajax function.
There is a separate function called cancelAjaxCall which will accept an index i.e. the nth number of ajax call which you want to cancel.
If you want to cancel the 3rd call from now in the past simply subtract 3 from the $scope.currentIndex and call the cancelAjaxCall function i.e. cancelAjaxCall($scope.currentIndex-3);