3

我正在使用@Phrogz 的快速脚本来取消除最后一个 AJAX 请求之外的所有请求，使用以下命令：

var fooXHR, fooCounter=0;
$('div').bind( 'click', function(){
  // Do the Right Thing to indicate that we don't care about the request anymore
  if (fooXHR) fooXHR.abort();

  var token = ++fooCounter;
  fooXHR = $.get( ..., function(data){
    // Even aborted XHR may cause the callback to be invoked
    if (token != fooCounter) return;

    // At this point we know that we're using the data from the latest request
  });
});

该脚本运行良好，但如果我div在页面加载时一次加载 3 个并期望加载所有 3 个的结果，则上面的脚本将只显示最后一个（因为前两个基于上面的脚本中止）。

您能否指出正确的方向，以通过封闭的 DOM 元素限制上述脚本？

例如...

<div id="one">1. run ajax on pageload and on click</div>
<div id="two">2. run ajax on pageload and on click</div>
<div id="three">3. run ajax on pageload and on click</div>

我希望所有三个 div 在页面加载或单击时都返回 ajax 请求。而且我想保留在点击时取消以前的 AJAX 请求的功能。但是，我不想点击div#one取消从div#two.

你跟着？

4

1 回答 1

3

只需使用哈希来为每个存储您的 xhr 和计数器变量div：

var requests = {};
$('div').bind( 'click', function(){
  var div = this;

  // init the entry for the div
  if (requests[div] === undefined) {
    requests[div] = {};
    requests[div].counter = 0;
  }

  // abort the old request
  if (requests[div].xhr !== undefined) {
    requests[div].xhr.abort();
  } 

  var token = ++requests[div].counter;
  request[div].xhr = $.get( ..., function(data) {
    // check for correct request
    if (token !== requests[div].counter) return;

    // ...
  });
});
于 2013-05-22T07:19:34.623 回答