AJAX - 如何在没有冻结浏览器的情况下逐个进行异步请求?

时间:2016-03-31 11:28:20

标签: javascript jquery ajax asynchronous

我有一个类似下面的textarea:

<textarea name="mailist" id="mailist" placeholder="email@domain.com"></textarea>

我想向邮件发送者发出请求,并使用&#34; split&#34;将数据(每行电子邮件)发送到某个URL。和&#34; foreach&#34; 。它成功了。

但问题是,当我点击提交按钮时,同时发送所有请求。我怎样才能做到:

  • 在其他

  • 结束后发送请求
  • 异步提出请求

  • 不冻结浏览器

1 个答案:

答案 0 :(得分:5)

您要找的是promise。 jQuery中的每个$.ajax函数都返回promise。您可以阅读documentation here以获取更多详细信息。要点是,返回的promise公开了一个名为then的函数,它可以用来按照你想要的方式一个接一个地链接请求。

考虑这种类型的ajax请求

var request = $.ajax({
  method: 'get',
  url: 'www.google.com'
});

由于它以异步方式运行,您需要注册处理程序以告知您请求成功完成或失败,如此

request.then(
    function successHandler(response) {
        /* The first function will be called if the request is successful */
    },
    function failureHandler(response) {
       /* The second function will be called if the request fails */
    }
);

使用此模式,您可以等待请求成功或失败,然后再继续执行下一个请求。

保留较早的代码部分

您需要实现一系列排序。大多数浏览器都有大约2-5个并发请求的合理限制。一个例子是

var emailAddresses = [/* a list email addresses */];
var MAX_SIMULTANEOUS_REQUESTS = 4;
var CURRENT_REQUESTS = [];

function runRequests(emailAddresses, max, running) {
  while(running.length < max) {
    running.push(createRequest(emailAddress.pop(), running));
  }
  return emailAddresses.length;
}

function createRequest(emailAddress, running) {
  var request = /* Creates requests in some manner */;
  request
    .then(
      function() {
        /* Remove this request from the list of running requests */
        var indexOfRequest = running.indexOf(request);
        running.splice(indexOfRequest, 1);
      },
      function() {
        /* For extra points, add this to a retry queue */
      }
    );
  
  return request;
}

/* Usage */
var interval = setInterval(function() {
  var remaining = runRequests(emailAddresses, MAX_SIMULTANEOUS_REQUESTS, CURRENT_REQUESTS);
  if (remaining === 0) {
    clearInterval(interval);
  }
}, 500);