Forever tinkering

Ajax calls을 for loop를 통해 연속적으로 실행할 경우, 모든 결과가 처리가 될때까지 브라우저 화면이 멈추거나 클릭이나 타이핑이 disabled되는 상황을 피하려면 아래 예제에 있는 getReaction처럼 function을 만들어 하나의 loop 단계가 끝날때마다 화면에 부분결과를 출력하게 할수 있음.

$('#select3').on('change', function() {
    var doping_ele=$(this). children("option:selected"). val();
    var howManyTargets=$('#select4'). children("option:selected"). val();
    //var howManyTargets="24";
    //console.log(doping_ele);
    var ele = $('#select1').val();
    var oxi_p=$('#select2').val();
    //console.log(dopants);
    var idx_found=0;
    for (var j=0;j<dopants.length;j++){
        if (dopants[j].replace(/ /g,'')==doping_ele){
            idx_found=j;
            break;
        }
    }
    //console.log(idx_found);

    
    $('#target_composition_table tbody').empty();
    //$('#target_composition_table2 tbody').empty();
    $("#progress_html").empty();
    //var dopant_url='/public/doping3/'+no_space_composition+'/'+ele+'/'+oxi_p+'/'+idx_found+'/';
    var dopant_url='/public/doping4/'+no_space_composition+'/'+ele+'/'+oxi_p+'/'+idx_found+'/'+howManyTargets+'/';
    $.ajax({
        url: dopant_url,
        method: 'GET',
        cache: false,
        dataType: 'json',
        contentType: 'application/json',
        complete: function(data){
            var obj = jQuery.parseJSON(data.responseText);
            var target_dopants=obj['target_dopants'];
            //console.log(target_dopants);
            
            var tlength=target_dopants.length;
            // create placeholder for output which allows following ajax calls run asynch (change async:true or comment out that line)
            for (var n=0;n<tlength;n++){
                $("#target_composition_table tbody").append("<tr><td><span class='reaction_final_"+n+"'><center><img src='/assets/loading.gif' width='16px' height='16px'></center></span></td></tr>");
                //$("#target_composition_table2 tbody").append("<tr><td><span class='reaction_final_"+n+"'><center><img src='/assets/loading.gif' width='16px' height='16px'></center></span></td></tr>");
            }
            
            for (var n=0;n<tlength;n++){
                var composition=get_short_no_space_compositon(target_dopants[n]);
                var autosynth_url = "/public/autosynth/"+composition+"/";
                console.log(autosynth_url);
                var reaction_final=composition;
                
                $('.reaction_final_'+n).html(target_dopants[n]);
                
                var getReaction = function(autosynth_url, composition, n){
                    return $.ajax({
                        url: autosynth_url,
                        method: 'GET',
                        cache: false,
                        dataType: 'json',
                        //async: false, /// without this... select3 change... does not work
                        contentType: 'application/json',

                        complete: function(data){
                            try{	
                                var obj = jQuery.parseJSON(data.responseText);
                                //console.log(obj);
                                reaction_final=obj['reaction_final'];
                                var howManySigmaInventory = (reaction_final.match(/sigma\_inventory/g) || []).length;
                                console.log(howManySigmaInventory+" 'sigma_inventory' found.");
                                for (var h=0;h<howManySigmaInventory;h++){
                                    reaction_final = find_substr_replace_with_url_v2(reaction_final);
                                }
                                console.log(reaction_final);
                                reaction_final = reaction_final.replace(/\(liquid[\W_]+inventory\)/g, '');
                                reaction_final = reaction_final.replace(/\(solid[\W_]+inventory\)/g, '');
                                reaction_final = reaction_final.replace(/sigma[\W_]+inventory/g, '<span style="color:red"><b>order</b></span>')
                                reaction_final = reaction_final.replace(composition, '<span style="color:orange"><b>'+composition+'</b></span>');
                                //$("#target_composition_table tbody").append("<tr><td>"+reaction_final+"</td></tr>");
                                //$("#target_composition_table2 tbody").append("<tr><td>"+reaction_final+"</td></tr>");
                                $('.reaction_final_'+n).html(reaction_final);
                
                                console.log(obj['reaction_final']+"--- finished "+(n+1)+' out of '+tlength);
                                
                            } catch (e){
                                console.log("something wrong in python code --- finished "+(n+1)+' out of '+tlength);
                            }
                        }
                    });<!--ajax-->
                }
                getReaction(autosynth_url, composition, n); // it will getting results asynchronously

            }<!--for-->
            
            
            
        }<!-- complete -->
    }); <!-- ajax-->											
    
});<!-- select3 on change-->

Related link: https://stackoverflow.com/questions/39036873/how-to-call-an-ajax-function-in-a-for-loop