我嵌套了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
在完成第一级以下项目之前执行第二级。该如何解决?
谢谢。