多个嵌套异步 AJAX 调用和返回数据的顺序

Posted 2023-02-19

【中文标题】多个嵌套异步 AJAX 调用和返回数据的顺序

【英文标题】：Multiple Nested async AJAX calls and order of returned data

【发布时间】：2012-10-28 22:15:12

【问题描述】：

第一次在这里发布海报。对于我遇到的其他问题，我已经找到了一些很好的答案，但是这个问题让我很困惑，我不确定解决它的最佳方法。我已经进行了一些搜索，但没有找到任何看起来像是解决方案的东西。

我正在构建一个作为基本 BOM 显示的表格。该函数采用所需的部件 ID 和空格（仅用于缩进结果以提高可读性）并通过再次调用自身来检查任何子部件的每个结果，依此类推。

如果我将 ASYNC 设置为 false 并且我得到了想要的结果，这会很好，但我认为可能有一种方法可以使这个异步并在更短的时间内达到相同的结果。

是的，我将对其进行修改，使其不会在每次调用时更新 DOM。我会把它改成一个变量，所以最后只有一个调用！

任何帮助表示赞赏。

/*******************************************************************
FUNCTION -  Traverse the BOM     
            Check each PID for child parts          
********************************************************************/   
function traverse_bom(search_term, spaces)      
    spaces += "     ";
    $.ajax(
        //async: false, 
        url: 'spec_collector_ajax.php',
        dataType: 'json',
        data:   data_retrieve: "database_query",
                 table: "Product_Structure",
                 order: "ORDER BY COMPRT_02",
                 search: search_term,                 
        success: function(data2) 
               
            // If there is data, then print it out to a table     
            if (data2 != 0) 
                           
                // Iterate through each entry and list the results
                $.each(data2, function(i2,item2) 
                      
                    // print the BOM entry info
                    $('#table_bom tbody:last').append( '<tr><td>' + spaces + item2.COMPRT_02 + '</td><td>' + item2.QTYPER_02 + '</td></tr>');

                    // Check for children under this part
                    traverse_bom(item2.COMPRT_02, spaces);                     
                );
             

            else
            
            
        ,
        // Error handling
        error: function (xhr, ajaxOptions, thrownError) 
            // Print error message for debugging
            alert(thrownError);
        
    ); 
;

【问题讨论】：

您是否考虑过实现一个队列来包含您的 ajax 调用？当您打开异步时，您可能会遇到回调的计时问题。

使用 ASYNC 调用，对查询数据库的 _ajax.php 文件的每次调用都可能比前一次更快或更慢，因此不能保证它们都会按顺序返回。我会看看队列是否是答案。

我决定改为修改 SQL 语句以在一次 AJAX 调用中检索所有 BOM 元素，而不是为每个 BOM 元素进行一次 AJAX 调用。客户端效率更高，工作量更少。

【参考方案1】：

您可以在调用递归期间设置async = false，使您的后续调用同步并且不会搞砸您的订单。

例如：

/*******************************************************************
FUNCTION -  Traverse the BOM     
            Check each PID for child parts          
********************************************************************/   
function traverse_bom(search_term, spaces, synchronous) 
    //if synchronous is null default to asynchronous 
    if(synchronous == null)  synchronous = false; 

    spaces += "     ";
    $.ajax(
        //async: false, 
        url: 'spec_collector_ajax.php',
        dataType: 'json',
        async: !synchronous, //Not synchronous
        data:   data_retrieve: "database_query",
                 table: "Product_Structure",
                 order: "ORDER BY COMPRT_02",
                 search: search_term,                 
        success: function(data2) 
               
            // If there is data, then print it out to a table     
            if (data2 != 0) 
                           
                // Iterate through each entry and list the results
                $.each(data2, function(i2,item2) 
                      
                    // print the BOM entry info
                    $('#table_bom tbody:last').append( '<tr><td>' + spaces + item2.COMPRT_02 + '</td><td>' + item2.QTYPER_02 + '</td></tr>');

                    // Check for children under this part
                    // This is where we set synchronous to true, inside the recursion.
                    traverse_bom(item2.COMPRT_02, spaces, true); 
                );
             

            else
            
            
        ,
        // Error handling
        error: function (xhr, ajaxOptions, thrownError) 
            // Print error message for debugging
            alert(thrownError);
        
    ); 
;