php - 优化ajax同步调用

Question

我有一些 ajax 脚本，可以触发大约 250 个同步 PHP 调用。这是我的脚本

$(document).ready(function(){ 
      $("#generate").html("<div class='modal'><p>Initializing...</p></div>");
      $.ajax({
          url:'/fetch around 250 url from database.php',
          async:false,
          dataType: 'json',        
          success: function(data){      
               $.each(data,function(key,val){
                    $("#generate").html("<div class='modal'><p>Fetching "+val.url+"</p></div>");
                    saveimage(val.url); 
              }
              $("#generate").html("<div class='modal'><p>done</p></div>");    
                    finalcreate();
          },
     });
   });
   function saveimage(){
        $.ajax({
             url: 'do some php work.php',
             async: false,
        });
    }
    function finalcreate(){
        $.ajax({
             url: 'do some php work.php',
             async: false,
         });
    }

在第一部分中，脚本从数据库中获取超过 250 个 url，并使用另一个 ajax 调用对每个 url 脚本进行一些 php 计算。当循环结束时，脚本执行最终的 ajax 调用。

当我在 Firefox 中运行此程序时，它仅成功运行 40 个网址，然后浏览器显示对话框，其中包含用户是否要停止此脚本的选项，如果用户想运行此脚本，则脚本会再次运行接下来的 40 个网址，相同的过程发生直到最后。我如何优化这个脚本，我不希望浏览器显示选项来停止这个脚本。请帮忙。

谢谢

Answer 1

试试这个:

function nextrequest() {
    if (requests.length == 0) {
        $("#generate").html("<div class='modal'><p>done</p></div>");
        finalcreate();
        return;
    }
    var val = requests.pop();
    $("#generate").html("<div class='modal'><p>Fetching "+val.url+"</p></div>");
    saveimage(val.url);
}
var requests = [];
$(document).ready(function(){
  $("#generate").html("<div class='modal'><p>Initializing...</p></div>");
  $.ajax({
      url:'/fetch around 250 url from database.php',
      dataType: 'json',
      success: function(data){
        requests = data;
           nextrequest();
      },
 });
});
function saveimage(){
    $.ajax({
         url: 'do some php work.php',
         success: function(data) {
            // do something...
            nextrequest();
         }
    });
}
function finalcreate(){
    $.ajax({
         url: 'do some php work.php',
     });
}

你将所有的 URL 存储在一个全局变量中，每次请求完成时，你都会得到下一个请求，直到所有的 URL 都被消耗完，(requests.length == 0)，你调用最终请求。

这样用户仍然可以在页面上执行其他操作，并且每次请求完成时都可以显示进度。另外，一个好处是您可以一次进行 2 个或更多调用，以使过程更快。