Question

我有一系列复选框，想要在用户选中复选框时发出$ http请求。但是，由于http请求需要一些时间才能完成，并且用户可能希望一次检查几个不同的框，我想延迟发送http请求，直到用户停止检查框为止。

我在发送$ http请求之前尝试使用$ timeout来设置延迟，但这并没有在发送之前对选择进行排队。

var nodeList = [];

$scope.checkNode = function(checkedNode, sendRequestFn) {

    nodeList.push(checkedNode);

    $timeout(function() {
        sendRequestFn(nodeList);
        nodeList = []; // Sent the list, so reset this.
    }, 500);
}

Answer 1

每次单击按钮时清除超时。通过实施，您每次点击都会开始新的超时。

var nodeList = [], waitBeforeRequest;

$scope.checkNode = function(checkedNode, sendRequestFn) {
  // if we are waiting, reset the timer
  if (waitBeforeRequest) $timeout.cancel(waitBeforeRequest);
  // wait for any more clicks before sending
  waitBeforeRequest = $timeout(function () {
    sendRequestFn(nodeList);
    nodeList = [];
  }, 500)

}

Answer 2

您需要知道用户何时完成表单并准备好提交其复选框更改。因此，您应该将http请求绑定到某个提交按钮或按钮，用户将在完成后单击此按钮，从而触发更新。

如果您不想将http更新绑定到按钮单击，那么我认为将事件绑定到超时是您的第二个最佳选择，因为没有办法告诉用户何时完成输入。

Answer 3

我认为你所追求的是一种去抖动功能。您可以编写自己的，但它可以在下划线库中使用，通常可以在Angular中包含在页面中。示例用法是：

var nodeList = [];

var debouncedSend = _.debounce(function(sendRequestFn) { 
  sendRequestFn(nodeList);
  nodeList = [];
}, 500);

$scope.checkNode = function(checkedNode, sendRequestFn) {
  nodeList.push(checkedNode);
  debouncedSend(sendRequestFn);
};

debouncedSend将在Angular之外调用，因此您可能需要将该函数包装在$ apply中，如：

var debouncedSend = _.debounce(function(sendRequestFn) { 
    $scope.$apply(function() {
    sendRequestFn(nodeList);
    nodeList = [];
  });
}, 500);

如何在发出http请求之前对复选框点击进行排队

3 个答案: