js如何使外循环等待内循环完成

时间:2020-03-25 06:56:30

标签: javascript promise synchronization

我嵌套了for循环。外循环是指级别,内循环是指项目。有2个级别,每个级别下有3个项目。内循环应针对每个项目运行ajax。因此,我使用了$.when().then()。我已经能够为每个项目以同步顺序运行ajax。但是,我在外循环中遇到问题时,不等待内循环处理级别1下的项目,然后再继续进行级别2。我没有等待第一级完成。它会按照同步顺序整理2级以下的处理项目。

sql中的sql记录表:

uid |level |description |
____|______|____________|
  1 | 1    | a          |
  2 | 1    | b          |
  3 | 1    | c          |
  4 | 2    | a          |
  5 | 2    | b          |
  6 | 2    | c          |
____|______|____________|

代码:

<?php
include 'config.php';
$sql    ="SELECT level ,COUNT(*) AS count FROM record GROUP BY level;";
$data   =fetchall_associate($conn,$sql);

    /*
  array(2) {
  [0]=>
  array(2) {
    ["level"]=>
    string(1) "1"
    ["count"]=>
    string(1) "3"
  }
  [1]=>
  array(2) {
    ["level"]=>
    string(1) "2"
    ["count"]=>
    string(1) "3"
  }
}
    */

?>
<html>
    <head>
        <script src="external_lib/jquery_3_4_1.min.js"></script>
        <script>
        //functions
        function range(start, end) 
        {
            return Array(end - start + 1).fill().map((_, idx) => start + idx)
        }
        function get_data(data)
        {
            level_key       =0;          
            var iteration   =function()
                            {
                                 var level_p        =$.when();
                                  data.forEach(function(level_val,level_id)
                                  {
                                    item_ids    =level_val['ids'];
                                    level       =level_val['level'];  
                                    level_p         =level_p.then(function()
                                    {                                            
                                        var item_p  =$.when();
                                        item_ids.forEach(function(item_val,item_id)
                                        {                                                                             
                                          item_p    =item_p.then(function()
                                                    {    
                                                        console.log(level+'=>'+item_val);
                                                        return ajax_get_data(level,item_val);
                                                    })
                                        })
                                    })                               
                                  })
                            }        
             iteration();          
        }
        function ajax_get_data(level,item_id)
        {

            return $.ajax({
                url     :'1_circular_2.php',
                data    :{'level':level,'item_id':item_id},
                type    :'POST',
                success:function(data)
                        {
                            //console.log(level+'=>'+item_id+'=>'+data);
                        }
            });
        }
        </script>
        <script>
        $(document).ready(function()
        {
            var level_records       ='<?php echo json_encode($data);?>';
            level_records           =JSON.parse(level_records);
            c=0;
            for(i=0;i<level_records.length;i++)
            {
                level       =level_records[i]['level'];
                c           +=parseInt(level_records[i]['count']);
                start_range =(level==1)?1:(c-level_records[(i-1)]['count']+1);
                //create empty progress bar
               $('#progress_bar_container').append('<div id="level_'+level_records[i]['level']+'"></div>')
               //create array for record count
               range_array              =range(start_range,c);
               level_records[i]['ids']=range_array;
            }

            get_data(level_records);
        })
        </script>
    </head>
    <body>

        <div id="progress_bar_container">

        </div>
    </body>
</html>

console.log(level+'=>'+item_val);输出:

2=>4 
2=>4 
2=>5 
2=>5 
2=>6 
2=>6

在完成第一级以下项目之前执行第二级。该如何解决?

谢谢。

0 个答案:

没有答案
相关问题