API 用户选择后调用

Question

嗯，目前正在处理旧的 angular js 应用程序。

这有一系列复选框，用户可以在其中 select 一个选项/多个选项。对于每个 selection，它都会执行后端 api 调用。但我想避免对每个 selection 进行后端调用，但允许用户执行他的 selection 几秒钟，然后立即进行后端调用。我试图通过 $timeout 函数实现它，即使它等待几秒钟直到用户执行 selection，但它确实调用后端 API 的次数select/deselect 选项。

笨蛋：sample plunker

如果有人能给我建议解决方案，我将不胜感激。

谢谢

Answer 1

我想你要找的是去抖功能。给定毫秒延迟，调用 debounce 函数将启动计时器并在计时器达到 0 后执行。如果我们再次调用相同的函数，在计时器达到 0 之前，计时器将重新启动。

如果用户频繁单击复选框，这将防止后端被 API 调用垃圾邮件。

有关去抖动的更多信息，请查看此link（其中也解释了油门）：https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

Answer 2

跟踪您是否正在等待调用后端怎么样？如果您正在等待，请不要再次调用您的函数。未经测试的代码示例：

var waiting = false
$scope.toggleCheck = function (option, optionArray, channel) {
    var index = optionArray.indexOf(option);
    optionArray[index].checked = !(optionArray[index].checked);
    if (waiting == false) {
        waiting = true //set to true so backend will not be called multiple times
        $timeout(function () {
            waiting = false
            //call the backend api
            //access the statuses by $scope.statuses
            alert('backend call ' + $scope.statuses);
        }, 2000);
    }
}

API 用户选择后调用

API Call after user selection

checkbox

selection

angularjs