Function that already running don't call it next time - php

Question

I am working on AngularJS project I am using ng-repeat to show data, There is a Edit button that enable editing for particular row. On edit button click there is Save and Cancel button shows. On save button click it call $http.post to update data in database. Data are shown in gal unit and store as liter so when I click on save button it first convert to liter and then store in db.
Now the problem is when I click on Save button for once it work correctly, But when I click twice on Save button it convert gal -> liter -> liter and then save to db.
So I want to do is if $http request is already in process then do not accept another $http request.
I have tried to disable the button but still it is clickable.
HTML:
<div class="taxi_output" ng-repeat="item in vmDosings.data track by $index" >
<div class="row">
<div class="col-lg-4 text-center one" ng-bind="item.dos_nr"></div>
<div class="col-lg-4 text-center two">
<div ng-if="item.enableContent">
<input id="{{$index}}" class="font-size input-{{$index}}" ng-class="{ 'error' : vmDosings.error.level || vmDosings.error.undef || vmDosings.error.exist }" type="text" ng-model="item.level" ng-change="itemChanges(item)" ng-disabled="!item.enableContent"/> {{::$root.getEinheiten($root.GlobalData.config.volumemessurement)}}
</div>
<div ng-if="!item.enableContent" >
<p class=""> {{ item.level + ' ' + $root.getEinheiten($root.GlobalData.config.volumemessurement)}} </p>
</div>
</div>
<div class="col-lg-4" ng-if="item.enableContent == false" style="vertical-align: middle">
<a class="btn" ng-click="enableContent(item, $index)" event-focus="click" event-focus-id="{{$index}}" tooltip-placement="bottom" tooltip="{{::$root.getLabel('edit')}}">
<i style="cursor:pointer;" class="fa fa-edit fa-2x"></i>
</a>
<a class="btn" ng-if="vmDosings.data.length > 1" ng-click="removeFromList(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('delete')}}">
<i style="cursor:pointer;" class="fa fa-trash fa-2x"></i>
</a>
</div>
<div class="col-lg-4" ng-if="item.enableContent == true">
<a class="btn" ng-click="saveChanges(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('save')}}">
<i style="cursor:pointer;" class="fa fa-save fa-2x"></i>
</a>
<a class="btn" ng-click="removeFromList(item, $index)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('delete')}}">
<i style="cursor:pointer;" class="fa fa-trash fa-2x"></i>
</a>
<a class="btn" ng-click="restoreChanges(item)" tooltip-placement="bottom" tooltip="{{::$root.getLabel('reset')}}">
<i style="cursor:pointer;" class="fa fa-remove fa-2x"></i>
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div ng-if="item.enableContent && vmDosings.validate == false">
<div class="panel panel-danger" style="margin-top:5px; margin-bottom:0px;">
<div class="panel-heading" style="padding:0">
<ul style="padding: 5px 0px 5px 30px;">
<li ng-if="vmDosings.error.level" ng-bind="getLabel('only_floats_with_one_digit')"></li>
<li ng-if="vmDosings.error.undef" ng-bind="getLabel('inputs_empty_not_allowed')"></li>
<li ng-if="vmDosings.error.exist" ng-bind="getLabel('data_already_exist')"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="hr-line-dashed"></div>
</div>
AngulrJS:
Enable Edit Mode:
$scope.enableContent = function(data, $index) {
angular.forEach(vmDosings.data, function(value, key) {
vmDosings.data[key].enableContent = (value.id == data.id ? true : false );
});
$timeout(function () {
$('.input-'+ $index).focus();
$('.input-'+ $index).val($('.input-'+ $index).val());
});
}
save button click:
$rootScope.GlobalData.config.volumemessurement get the id of unit
$rootScope.calcunits(9, id, data['level']); is a function for convert
$scope.saveChanges = function(data) {
var id = $rootScope.GlobalData.config.volumemessurement;
data['level'] = $rootScope.calcunits(id, 9, data['level']);
checkValues(data);
var checked = true;
for (i in vmDosings.error) {
if (vmDosings.error[i]) {
checked = false;
vmDosings.validate = false;
break;
}
}
if(checked == true) {
DosingsServices.saveChanges(data).then(function (result) {
if( result.data.message == 'success' && result.data.status == 200) {
DosingsServices.getDosings($stateParams.taxi_id).then(function (result) {
//vmDosings.data = result.data.dosings
var data = result.data.dosings;
var id = $rootScope.GlobalData.config.volumemessurement;
var i = 0;
for(i = 0; i <= data.length; i++) {
angular.forEach(data[i], function(value, key){
if(key == "level")
data[i][key] = $rootScope.calcunits(9, id, value)
});
}
vmDosings.data = data;
});
}
else if( result.data.message == 'Data Already Exist') {
data['level'] = $rootScope.calcunits(9, id, data['level']);
vmDosings.error.exist = true;
vmDosings.validate = false;
}
});
}
}

Answer 1

What you need is interceptors method of $httpProvider. It give you full control over any http call within Angular scope ( request,requestError,response,responseError methods).
If service call is already in progress you can skip next call or put it in a queue to call once you get response from previous call any other thing you want to do
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// optional method
'request': function(config) {
// do something on success
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');

Answer 2

Set a flag var inProgress = true; before your post method. Check on if this flag is set before you post. Set flag to false when post method is finished (finally).
You can also use this flag to enable/disable save button.