离子 - 如何延迟角度范围滑块更新

Question

我在我的应用程序中使用范围滑块，它工作正常，但问题是代码向服务器发送了大量范围滑块值。它导致一些滞后。我想设计它，以便它可以发送用户删除时唯一的最后一个值他的手指来自滚动条。这可能吗？ 如果是这样，我应该从我的代码中更改什么？ 提前感谢。这是我的代码：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 。 模糊正是这样做的。 只需将模糊选项添加到模型中：

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的更多信息

Answer 2

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

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