Ionic - Как задержать изменение ползунка углового диапазона

Question

Я использую слайдер диапазона в своем приложении, и он отлично работает, но проблема в том, что код отправляет множество значений ползунка диапазона на сервер. И это вызывает некоторые задержки. Я хочу создать так что он может отправить только последнее значение, когда пользователь удаляет свой палец из полосы прокрутки. Возможно ли это? Если да, то что я должен изменить из своего кода? Спасибо в advance.Here мой код: Html часть

<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> 

А вот контроллер входит:

$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

То, что вы ищете, чтобы обновить model только тогда, когда входной диапазон потерял его внимание. Blur делает именно это. Просто добавьте параметр размытия для вашей модели:

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)"> 

Другим вариантом было бы отложить обновление модели. Например, вы можете установить модель, чтобы получить обновление каждые 1 сек, как это:

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

Вы можете прочитать на ngModelOptions here

Answer 2

Я изменил нг-изменение к нг-MouseUp и этим исправил проблему с задержкой и несколькими запросами на сервер, поскольку я использовал ajax.

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