Question

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

库存物品
系统

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

JAVASCRIPT PART 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调用，等待响应，然后移动到第二个项目。它一遍又一遍地做到这一点，直到它到达最后一个项目，此时，它移动到下一个数据集（系统），然后通过它们。

现在，我的工作正常。您可以在下面的CodePen链接中看到一个功能齐全的示例。此版本的JS代码内置了一个小延迟，以更好地演示该问题。

WORKING EXAMPLE

现在要求我添加暂停/取消暂停功能。关于如何在不冻结浏览器的情况下停止此操作，我有点不知所措，更重要的是，如何在正确的数据集中的正确位置继续前进。

我尝试添加一个打开和关闭的paused布尔变量，然后在我的函数中添加一个等待paused变量为false的循环。这显然会占用浏览器窗口。

任何人都可以了解如何在不欺骗浏览器的情况下进行暂停和取消暂停吗？

提前致谢。

保留JAVASCRIPT第2部分

var paused = false;

function PauseIndexing() {
  //paused = true;
}

function BeginIndexing() {
  updateItems(inventory, 'inventory', 0, function () {
    //This gets called when inventory is done
    updateItems(systems, 'systems', 0, function () { 
      alert("Inventory and Systems Imported");
    });
  });
}

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

  /* This causes complete freeze as expected*/
  //while (paused) {}

  var item_count = items.length;

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

}

Answer 1

在这里，你必须使用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
}

Working Pen

或者检查下面的结果

＆＃13;

var paused = false;
var pausedAt = 0;
var inventory = [
  {"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 systems = [
  {"id": "28","title": "System 1","type": "system"}, 
  {"id": "54","title": "System 2","type": "system"}, 
  {"id": "76","title": "System 3","type": "system"}
];

function PauseIndexing() {
  paused = true;
  //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
}
  /* This causes complete freeze as expected*/
  /*
  while (paused) {

  }
	*/
  
  var item_count = items.length;

  setTimeout(function(){
    $.post('http://www.geonames.org/countries/', {
      item: items[x],
      type: type
    }, function () {
      x++;
      console.log(x);
      if (x == item_count) {
        updateBar(item_count, 100, type);
        updateText("<span style='color:#090;'>Done!</span>", type);
        callback();
      } else {
        var perc = Math.round((x / item_count) * 100);
        updateBar(x, perc, type);
        updateItems(items, type, x, callback);
      }

    });
  }, 500);
}

function updateText(val, type) {
  $('small.' + type + '_name').html(val);
}

function updateBar(x, perc, type) {
  $('.progress.' + type + ' .progress-bar')
    .attr('aria-valuenow', perc)
    .css('width', perc + '%')
    .html(x + ' (' + perc + '%)');
}

function isFunction(functionToCheck) {
  var getType = {};
  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}

＆＃13;

.progress{background:#333;}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn-lg btn-success" onclick="BeginIndexing(0);">Start!</div>

<div class="btn btn-lg btn-primary" onclick="PauseIndexing(true);">Pause</div>
<div class="btn btn-lg btn-primary" onclick="ContinueIndexing(false);">Continue</div>



<div class="panel">
        <div class="panel-body">
            <h2>9 Inventory Items</h2>
            <small class="inventory_name">Pending....</small>
            <div class="progress inventory">
              <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                0 (0.00%)
              </div>
            </div>
        </div>
    </div>
    
    
    <div class="panel">
        <div class="panel-body">
            <h2>3 Systems</h2>
            <small class="systems_name">Pending....</small>
            <div class="progress systems">
              <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                0 (0.00%)
              </div>
            </div>
        </div>
    </div>

＆＃13;

Answer 2

这应该这样做：

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);
    }
  });

}

检查出来：http://codepen.io/anon/pen/bEbvbJ

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

2 个答案: