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

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

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

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

2 个答案: