Javascript 暂停大量AJAX调用、多个数据集

我正在尝试创建一个web实用程序，它可以获取多个大型数据集，并进行ajax调用来处理它们，并将它们索引到一个表中进行搜索。基本上，数据将被分解为5个数据集，但是为了简单起见，我将把样本数据减少为两个数据集（基本上是多维数组）

• 库存物品
• 系统

---

为了简单起见，让我们再说一遍，每个数据集中有3个项目

JAVASCRIPT第1部分

var inventory = [
  {"id": "1","title": "0002\/840","type": "inventory"}, 
  {"id": "2","title": "0002\/841","type": "inventory"}, 
  {"id": "3","title": "0002\/842","type": "inventory"}
];
var systems = [
  {"id": "28","title": "System 1","type": "system"}, 
  {"id": "54","title": "System 2","type": "system"}, 
  {"id": "76","title": "System 3","type": "system"}
];

---

它的工作方式是，代码命中第一个清单项，基于它进行ajax调用，等待响应，然后移动到第二个清单项。它一次又一次地这样做，直到到达最后一个项目，在这一点上，它移动到下一个数据集（系统），然后通过这些数据集工作

现在，我的工作很好。您可以在下面的代码笔链接中看到一个完整的功能示例。这个版本的JS代码内置了一个小延迟，以更好地演示这个问题

---

现在有人要求我添加暂停/取消暂停功能。我有点不知所措，不知如何在不冻结浏览器的情况下停止此操作，更不知如何在正确的数据集中的正确位置恢复上次中断的位置

我尝试添加一个开关切换的

paused

布尔变量，然后在我的函数中添加一个循环，只等待

paused

变量变为

false

。这显然占用了浏览器窗口

有人能告诉我如何在不破坏浏览器的情况下进行暂停和取消暂停吗

提前谢谢

---

剩下的JAVASCRIPT第2部分

var暂停=false；
函数PauseIndexing（）{
//暂停=真；
}
函数BeginIndexing（）{
updateItems（库存，'inventory'，0，函数（）{
//在完成清点时调用该函数
updateItems（系统，'systems'，0，函数（）{
警报（“库存和系统导入”）；
});
});
}
函数updateItems（项、类型、x、回调）{
/*这会像预期的那样导致完全冻结*/
//当（暂停）{}
var item_count=items.length；
$.post（“”{
项目：项目[x]，
类型：类型
}，函数（）{
x++；
如果（x==项目数量）{
回调（）；
}否则{
更新项（项、类型、x、回调）；
}
});
}

这应该可以做到：

function PauseIndexing(pause) {
  paused = pause;
}

function updateItems(items, type, x, callback) {

  if (paused) {
    return setTimeout(updateItems, 100, items, type, x, callback);
  }

  var item_count = items.length;

  $.post('', {
    item: items[x],
    type: type
  }, function () {
    x++;
    if (x == item_count) {
      callback();
    } else {
      updateItems(items, type, x, callback);
    }
  });

}

---

检查它：

在这里，您必须使用

pausedAt=x保持进度状态，然后从您离开的地方继续。下面是更改的代码段&工作示例链接

function BeginIndexing(x) {
   updateItems(inventory, 'inventory', x, function () {
     pausedAt = x = 0;
    updateItems(systems, 'systems', x, function () {
      alert("Inventory and Systems Imported");
    });
  });
}
function ContinueIndexing(){
  paused = false;
  console.log(pausedAt)
  BeginIndexing(pausedAt);
} 
function updateItems(items, type, x, callback) {
if(paused){
  pausedAt = x;
  return
}


或者检查下面的结果


var暂停=false；
var pausedAt=0；
var存货=[
{“id”：“1”，“title”：“0002\/840”，“type”：“inventory”}，
{“id”：“2”，“title”：“0002\/841”，“type”：“inventory”}，
{“id”：“3”，“title”：“0002\/842”，“type”：“inventory”}，
{“id”：“2”，“title”：“0002\/841”，“type”：“inventory”}，
{“id”：“3”，“title”：“0002\/842”，“type”：“inventory”}，
{“id”：“2”，“title”：“0002\/841”，“type”：“inventory”}，
{“id”：“3”，“title”：“0002\/842”，“type”：“inventory”}，
{“id”：“2”，“title”：“0002\/841”，“type”：“inventory”}，
{“id”：“3”，“title”：“0002\/842”，“type”：“inventory”}
];
var系统=[
{“id”：“28”，“title”：“System 1”，“type”：“System”}，
{“id”：“54”，“title”：“System 2”，“type”：“System”}，
{“id”：“76”，“title”：“System 3”，“type”：“System”}
];
函数PauseIndexing（）{
暂停=真；
//pausedAt=x；
}
函数开始索引（x）{
更新项（库存，'库存'，x，函数（）{
pausedAt=x=0；
更新项（系统，'系统'，x，函数（）{
警报（“库存和系统导入”）；
});
});
}
函数ContinueIndexing（）{
暂停=错误；
console.log（pausedAt）
开始标记（暂停）；
} 
函数updateItems（项、类型、x、回调）{
如果（暂停）{
pausedAt=x；
返回
}
/*这会像预期的那样导致完全冻结*/
/*
while（暂停）{
}
*/
var item_count=items.length；
setTimeout（函数（）{
$.post（$）http://www.geonames.org/countries/', {
项目：项目[x]，
类型：类型
}，函数（）{
x++；
控制台日志（x）；
如果（x==项目数量）{
updateBar（项目计数，100，类型）；
updateText（“完成！”，键入）；
回调（）；
}否则{
var perc=数学四舍五入（（x/项目计数）*100）；
updateBar（x，perc，type）；
更新项（项、类型、x、回调）；
}
});
}, 500);
}
函数updateText（val，类型）{
$（'small.'+type+'u name'）.html（val）；
}
函数updateBar（x，perc，type）{
$（'.progress.'+type+'.progress bar'）
.attr（'aria-valuenow'，perc）
.css（'width'，perc+'%'））
.html(x+'（'+perc+'%）');；
}
函数isFunction（函数检查）{
var getType={}；
返回functionToCheck&&getType.toString.call（functionToCheck）=='[object Function]'；
}
.progress{background:#333；}

开始
暂停
继续
9库存物品
悬而未决的
0 (0.00%)
3系统
悬而未决的
0 (0.00%)
当您可以发送一个ajax请求时，为什么还要用ajax请求淹没服务器？对于加载滑块？@madalinivascu，因为ajax调用运行的进程实际上冻结了我的服务器，直到它完成为止。我更喜欢调用一个，停止并允许其他进程完成，然后调用下一个进程。这不是一段公开的代码，只供我们的员工使用。进度条到处都是。这就像连续轮询一样，可能会导致性能问题。最好在loader LoadingUp上禁用start按钮可以做到这一点