Mettre en pause un grand nombre d'appels AJAX, plusieurs jeux de données

Question

J'essaie de créer un utilitaire Web qui prend plusieurs grands ensembles de données et effectue des appels ajax pour les traiter et les indexer dans une table pour la recherche. Fondamentalement, les données seront décomposées en 5 ensembles de données, mais par souci de simplicité, je vais réduire les données de l'échantillon à deux ensembles (essentiellement des tableaux multidimensionnels).

• articles en stock
• Systems

---

Disons, encore une fois pour des raisons de simplicité, que chaque jeu de données 3 éléments qu'il contient.

JAVASCRIPT PARTIE 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"} 
]; 

---

La façon dont il devrait fonctionner est que le code frappe le premier élément d'inventaire, fait un appel ajax basé sur elle, attend la réponse, puis se déplace au deuxième article. Il le fait encore et encore jusqu'à ce qu'il atteigne le dernier élément, à quel point, il se déplace vers l'ensemble de données suivant (systèmes), et puis se fraye un chemin à travers ceux-ci.

Maintenant, cela fonctionne très bien. Vous pouvez voir un exemple entièrement fonctionnel sur le lien CodePen ci-dessous. Cette version du code JS a un petit délai intégré pour mieux démontrer le problème.

WORKING EXAMPLE

---

Il a été demandé que j'ajouter une pause/fonction Réactiver. Je suis un peu perdu sur la façon d'arrêter cela sans geler le navigateur, et plus encore, comment reprendre où je me suis arrêté au bon endroit dans le jeu de données correct.

J'ai essayé d'ajouter une paused variable booléenne qui est activée et désactivée, puis une boucle dans ma fonction qui serait tout simplement attendre d'être false la variable paused. Cela a évidemment bloqué la fenêtre du navigateur. Quelqu'un peut-il nous éclairer sur la façon dont je pourrais être en mesure de faire une pause et de ne pas faire de pause sans flipper le navigateur?

Merci d'avance.

---

RESTANT JAVASCRIPT PARTIE 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

Ici, vous devez maintenir e e état de progression en utilisant pausedAt = x, puis continuez depuis votre point de départ. Ci-dessous sont les extraits modifiés & le lien de l'exemple de travail.

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

ou bien vérifier le résultat ci-dessous

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) { 
 

 
    } 
 
\t */ 
 
    
 
    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]'; 
 
}

.progress{background:#333;}

<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>

Answer 2

Cela devrait le faire:

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

} 

Check it out: http://codepen.io/anon/pen/bEbvbJ