javascript - AngularJS/IonicFramework 阻止切换时的多个 API 调用

Question

我已阅读本文并正在尝试实现类似的功能

“如果您使用切换按钮，例如:打开和关闭某项并且它到达 API 端点，请务必将该交互包装在计时器中，这样如果用户决定，您就不会多次调用该端点快速连续多次点击控件。稍等一下，然后点击端点。”

我有一个带有一系列切换开关的设置页面。我不想在每次切换发生变化时进行 API 调用，而是希望延迟将范围值传递到服务器的 API 调用。我想延迟X秒。但是，通过这样做

    $scope.settingsChange = function () {

        $timeout(function () {
            //save_notifications
            console.log('called');
           // Trigger API call
        }, 3000);
    };

所发生的一切只是将调用延迟了 3000 毫秒。如果我切换某项 3 次，控制台日志仍然会出现 3 次。

我完全知道这是因为我实现了超时功能。我不确定要实现什么才能获得海报在上面的引文中提到的功能。

非常感谢任何想法。

谢谢

注意:我的模板如下所示

        <ion-toggle ng-repeat="item in settingsData"
                    ng-model="item.checked"
                    ng-checked="item.checked"
                    ng-change="settingsChange()">
            {{ item.text }}
        </ion-toggle>

Answer 1

发起 API 调用后，阻止进行任何其他调用。

$scope.settingsChange = function () {

  if ($scope.processingSettingChange) return;
  $scope.processingSettingChange = true;

    $timeout(function () {
        //save_notifications
        console.log('called');
       // Trigger API call
       $scope.processingSettingChange = false;
    }, 3000);
};

您可能还想在 API 处理请求时禁用 UI。您应该能够使用相同的 $scope 变量和 ng-disabled