XMLHttpRequest 循环内存泄漏

Question

我正在尝试根据有关 ajax URL 的信息检查许多项目。但是当我在浏览器中运行此功能时，内存使用量超过 2 gigs，然后浏览器崩溃（Chrome、Firefox）。我究竟做错了什么？ items 变量非常大 - >200 000 并且还包含一些大字符串。

var items = [1,2,3,4,5,6,7,8,9,10,...,300000]
var activeItems = {}

function loopAjax(){
    for (i=0; i < items.length; i++) {
        var currItem = items[i];
        var request = new XMLHttpRequest();
        var found = 0

        request.open("GET", "/item=" + currItem);
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                var response = JSON.parse(request.responseText);
                var active = response[0].active;
                if (active) {
                    console.log("FOUND ACTIVE! " + currItem);
                    activeItems[found] = {"active": true, "item": currItem};
                    found++;
                }
            }
        }
        request.send();
    }
}

Answer 1

谢天谢地，浏览器停止运行并死机。如果没有，您只是创建了拒绝服务攻击！

需要重新解决问题。您最好创建一个包含一堆请求的状态机。这样你一次只能说 5 个并发请求。

function ItemChecker(sample_size, max_threads) {
  this.sample_size = sample_size;
  this.max_threads = max_threads;
  this.counter = 0;
  this.activeItems = [];
  this.isRunning = false;
  this.running_count = 0;
}

ItemChecker.prototype.start = function start() {
  this.isRunning = true;
  while (this.running_count < this.max_threads) {
    this.next();
  }
  return this;
};

ItemChecker.prototype.stop = fucntion stop() {
  this.isRunning = false;
  return this;
};

ItemChecker.prototype.next = function next() {
  var request, item_id, _this = this;

  function xhrFinished(req) {
    var response;
    if (req.readyState !== 4) {
      return;
    }

    _this.counter--;

    if (req.status === 200) {
      try {
        response = JSON.parse(request.responseText);
        if (response[0].active) {
          _this.activeItems.push({
            active: true,
            item: item_id;
          });
        }
      } catch(e) {
        console.error(e);
      }

      // When finished call a callback
      if (_this.onDone && _this.counter >= _this.sample_size) {
        _this.onDone(_this.activeItems);
      }
    }
    else {
      console.warn("Server returned " + req.status);
    }
  }

  if (!this.isRunning || this.counter >= this.sample_size) {
    return;
  }

  item_id = this.counter;
  this.counter++;

  request = new XMLHttpRequest();
  request.onreadystatechange = xhrFinished;
  request.open("GET", "item=" + item_id);
  request.send();
};

ItemChecker.prototype.whenDone = function whenDone(callback) {
  this.onDone = callback;
  return this;
};

这可能有用吗？没试过真的。但你可以这样称呼它：

var item_checker = new ItemChecker(300000, 5);
item_checker.whenDone(function(active) {
  // Do something with active
}).start();