Вызов API после выбора пользователя

Question

Um В настоящее время работает над старым угловым js-приложением.

В нем есть ряд флажков, в которых пользователь может выбрать один или несколько параметров.для каждого выбора он выполняет вызов API бэкэнда.но я хочу не делать бэкэнд-вызов для каждого выбора, но позволить пользователю сделать свой выбор в течение пары секунд, а затем сделать бэкэнд-вызов сразу.Я пытался добиться этого с помощью функции $ timeout, хотя он и ждал пару секунд, пока пользователь не сделает выбор, но он запрашивает внутренний API-интерфейс в течение количества раз, когда я выбираю / отменяю опции.

Плункер: Образец Плункер

очень признателен, если кто-то может предложить мне решение.

Спасибо

Answer 1

Как насчет того, чтобы просто отслеживать, ожидаете ли вы, чтобы вызвать бэкэнд.Если вы ждете, не вызывайте свою функцию снова.Пример непроверенного кода:

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);
    }
}

Answer 2

Я думаю, что вы ищете функцию debounce.Учитывая задержку в мс, вызов функции debounce запустит таймер и выполнится после того, как таймер достигнет 0. Если мы снова вызовем ту же функцию, прежде чем таймер достигнет 0, таймер перезапустится.

Это предотвратит рассылку спама с вызовами API, если пользователь часто щелкает по флажкам.

Для получения дополнительной информации о debounce перейдите по этой ссылке (где также объясняется настройка газа):https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf