Question

我正在使用@ Phrogz's quick script使用以下内容取消除最后一个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
  });
});

这个脚本运行得很好，但如果我在pageload上一次加载3 div并希望加载所有3的结果，上面的脚本将只显示最后一个（因为前两个基于中止）在上面的剧本上。）

你能指出我正确的方向来限制上面的脚本吗？

例如......

<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调用的ajax请求。

你跟着？

Answer 1

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

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;

    // ...
  });
});

如何通过对象限制Javascript计数器变量的范围？

1 个答案: