Ionic - How to delay angular range slider update

Question

I use range slider in my app and it works fine, but the problem is the code sends lots of range slider values to the server.And it causes some lags.I want to design that so it can send the only last value when user removes his finger from scrollbar.Is it possible ? If so what should I change from my code ? Thank in advance.Here is my code: Html part

<div class="item range">              
               <i class="icon ion-ios7-sunny-outline"></i>
               <input type="range" name="volume" min="0" max="100" value="{{scrollvalue}}" ng-model="scrollvalue" ng-change="enter(scrollvalue,lighting.id)">
               <i class="icon ion-ios7-sunny"></i>

            </div>

And here is controller part:

$scope.scrollvalue=0;

  $scope.enter = function(scrollvalue,deviceId,id){


    var data2 = {
      credentials: $scope.credentials,
      scrollvalue:scrollvalue,
      deviceId:deviceId
    };
         //var ss = id;

             $scope.scrollvalue=scrollvalue;

    LightingClient.postLightings(serverUrl, data2, 10000)
      .success(function (response) {

Answer 1

What you are looking for is to update your model only when the range input has lost its focus. Blur does exactly this. Just add the blur option to your model:

ng-model-options="{ updateOn: 'blur' }"

 <input type="range" name="volume" min="0" max="100" value="{{scrollvalue}}" ng-model="scrollvalue" ng-model-options="{ updateOn: 'blur' }" ng-change="enter(scrollvalue,lighting.id)">

Another option would be to delay the model update. For example you can set your model to get updated every 1 sec like this:

ng-model-options="{ debounce: 1000 }"

You can read more on ngModelOptions here

Answer 2

我将ng-change更改为ng-mouseup ，并且已经解决了延迟和多次请求服务器的问题，因为我一直在使用ajax。

 ng-mouseup="enter(scrollvalue,lighting.id)"