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

【问题标题】：Ionic - How to delay angular range slider update离子 - 如何延迟角度范围滑块更新
【发布时间】：2016-07-29 20:07:20
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs ionic-framework

【解决方案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阅读更多内容

【讨论】：

仅供参考，如果任何未来的读者试图通过链接到 ng-model 的另一个输入来控制滑块，您可能会发现这个问题很有价值stackoverflow.com/q/42605685/5797593。祝你好运！

【解决方案2】：

我将 ng-change 更改为 ng-mouseup，它解决了我一直在使用 ajax 的延迟和对服务器的多个请求的问题。 p>

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

【讨论】：