AngularJS / IonicFramework防止在toggle上调用多个API

AngularJS / IonicFramework prevent multiple API calls on toggle

本文关键字:调用 API toggle IonicFramework AngularJS      更新时间:2023-09-26

我读过这篇文章,正试图实现类似的功能

"如果你正在使用切换按钮,例如:打开和关闭某些东西,它击中了一个API端点,请确保将该交互包装在计时器中,这样如果用户决定多次快速连续点击控件,你就不会多次调用该端点。稍等,然后到达端点。"

我有一个带有一系列拨动开关的设置页面。而不是在每个切换项更改时执行API调用,我希望延迟将作用域的值传递给服务器的API调用。我想把它延迟X秒。然而,通过这样做

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

所发生的一切只是将呼叫延迟了3000ms。如果我切换某些东西3次,我仍然会得到控制台日志出现3次。

我完全意识到这是因为我已经实现了一个超时函数。我不确定如何实现海报中提到的功能。

如有任何建议,不胜感激。

谢谢,

注意:我的模板是这样的

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

一旦启动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