我需要 Web Worker 来循环 AJAX 请求吗？

Question

Given：一个用于解析网站上部分数据的 php 脚本。它解析大约 10k 产品，因此相当慢。

我需要为它制作一个带有 html/css/js 的网络前端。我做了一个循环，它发出 ajax 请求并显示进度信息。它使用同步 ajax，因为它需要等到另一个请求完成才能执行另一个。

 do {
    var parseProductsActive = true;
    var counter = 0;
    myAjax('parseProducts.php?start='+counter, false, function(resp) {
        if (resp[0]=='s') {
            counter += Number(resp.substring(1));
            parseProductsActive = false;
        }
        else {
            counter += Number(resp);
        }   
        self.postMessage(counter);  
    });
 } while (parseProductsActive==true);

我在 Web Worker 中这样做是因为我担心它会因为这个无限循环而挂起界面，并且（a）ajax 本身的同步性无助于解决问题。

但是当我尝试在 Web Worker 中使用 ajax 时，我发现虽然可行，但它很难，因为 jQuery 根本不能在 Web Worker 中工作。它甚至将 DOM 用于非 DOM 操作，并且 DOM 在 Web Worker 中不可用。许多开发人员根本怀疑使用 Web Workers。我只是想问我这样做是对还是错。还有其他我看不到的表面解决方案吗？

Answer 1

您猜对了：递归回调是按顺序执行一堆异步请求的方式。它可能看起来有点像这样：

var parseProductsActive = true;
var counter = 0;

//define the loop
function doNextAjax(allDone){
   //Instead of just returning, an async function needs to 
   //call the code that comes after it explicitly. Receiving a callback
   //lets use not hardcode what comes after the loop.

  if(!parseProductsActive){
    allDone();
  }else{
    //use async Ajax:
    myAjax('parseProducts.php?start='+counter, true, function(resp) {
        if (resp[0]=='s') {
            counter += Number(resp.substring(1));
            parseProductsActive = false;
        }
        else {
            counter += Number(resp);
        }   
        self.postMessage(counter);

        doNextAjax(); // <---
    });
}

//Start the loop
doNextAjax(function(){
  console.log("the code that runs after the loop goes here")
});

//BTW, you might be able to get rid of the "parseProductsActive" flag with a small
// refactoring but I'm keeping the code as similar as possible for now.
//It would be kind of equivalent to writing your original loop using a break statement.

是的，它丑陋而冗长，但它是在原始 Javascript 中实现它的唯一方法。如果您想编写一个看起来像循环而不是带有大量 goto 的更结构化的版本，请查看其中一个异步控制流库或将具有异步支持的 Javaascript 扩展编译回常规 JS 的编译器之一带有回调。