javascript - Ionic - 如何延迟 Angular 范围 slider 更新

Question

我在我的应用程序中使用范围 slider 并且它工作正常，但问题是代码向服务器发送了大量范围 slider 值。这会导致一些延迟。我想设计它以便它可以发送唯一的最后一个值当用户从滚动条上移开他的手指时。这可能吗？如果是这样，我应该从我的代码中更改什么？在此先感谢。这是我的代码: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>

这里是 Controller 部分:

$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

您正在寻找的是仅在范围输入失去焦点时更新您的模型。 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 上阅读更多内容