js first progressbar in loop not updating

Question

I have two progress bars which I want to update in sequence. After the first progressbar reached 100%. Then, the second progress bar should start. Progress bar follow the array key. a,b,c on first progress bar and d,e,f on second progress bar. But, first progress stop at first task and continue to run second progress bar. I had tried increase the timeout. But, still the first progress bar stop in first task.

<?php
 $grouped_records=
 [

                1=>array('a','b','c'),
                2=>array('d','e','f')

];

?>
<html>
 <head>
  <style>
        .progress-bar-1  .progress-bar-2
        {
            border: 1px solid black;
            background-color: #f0f0f0;
        }

        .progress-bar-1 div , .progress-bar-2 div
        {
            background-color: gray;
            height: 2.00em;
            font-size:30px;

        }

    </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        function delayedLoop(collection, delay, callback, context)
        {
            context = context || null;

            var i = 0,
            nextInteration = function()
            {
                if (i === collection.length)
                {
                    return;
                }

                callback.call(context, collection[i], i);
                i++;
                setTimeout(nextInteration, delay);
            };

            nextInteration();
        }
        Object.size = function(obj)
        {
            var size = 0, key;
            for (key in obj)
            {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        };

        $(document).ready(function()
        {

        var level_records       ='<?php echo json_encode($grouped_records);?>';
        level_records           =JSON.parse(level_records);
        //get object size-https://stackoverflow.com/questions/5223/length-of-a-javascript-object
        var size        =Object.size(level_records);
        interval_array  =[1000,1000];
            for(i=1;i<=size;i++)
            {
                css_class       =".progress-bar-"+i+" div";
                //delayedloop-https://stackoverflow.com/questions/30987218/update-progressbar-in-each-loop
                var progressBar = document.querySelector(css_class);
                items           =level_records[i];
                delayedLoop(items, interval_array[i], function(item, index)
                    {
                        perc        =((index + 1) / items.length * 100);
                        perc        =(Math.round(perc * 100) / 100).toFixed(2);
                        var width   =perc + "%";
                        progressBar.style.width = width;
                        progressBar.innerHTML = (index + 1) + '/' + items.length + ' - ' + items[index] + ' (' + width + ')';
                    }); 
            }

        })


    </script>

</head>
<body>
    <div class="progress-bar-1">
        <div style="width: 0">
        </div>
    </div>
    <div>interval</div>
    <div class="progress-bar-2">
        <div style="width: 0">
        </div>
    </div>

</body>

Thanks in advance.

Premlatha · Accepted Answer · 2020-02-19T03:59:28.203

I had refer this and tried replace for loop with an asynchronous loop that uses setTimeout(). I count current level itemlist, items_count. Since I put delay 1000 when loop in items in each level, I count delay from one level to another as items_count * 1000(if 9 items would be 9000 delay to proceed to second progressbar). This has solve my problem

<?php


$grouped_records=
[

                1=>array('a','b','c'),//level 1-first progressbar
                2=>array('d','e','f')//level 2-second progressbar

 ];

 ?>
<html>
<head>
<style>
        .progress-bar-1  .progress-bar-2
        {
            border: 1px solid black;
            background-color: #f0f0f0;
        }

        .progress-bar-1 div , .progress-bar-2 div
        {
            background-color: gray;
            height: 2.00em;
            font-size:30px;

        }

    </style>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
        function delayedLoop(collection, delay, callback, context)
        {
            context = context || null;

            var i = 0,
            nextInteration = function()
            {
                if (i === collection.length)
                {
                    return;
                }

                callback.call(context, collection[i], i);
                i++;
                setTimeout(nextInteration, delay);
            };

            nextInteration();
        }
        Object.size = function(obj)
        {
            var size = 0, key;
            for (key in obj)
            {
                if (obj.hasOwnProperty(key)) size++;
            }
            return size;
        };

        $(document).ready(function()
        {

        var level_records       ='<?php echo json_encode($grouped_records);?>';
        level_records           =JSON.parse(level_records);
        //get object size-https://stackoverflow.com/questions/5223/length-of-a-javascript-object
        var size        =Object.size(level_records);
        //interval_array    =[1000,1000];
        /*  for(i=1;i<=size;i++)
            {
                css_class       =".progress-bar-"+i+" div";
                //delayedloop-https://stackoverflow.com/questions/30987218/update-progressbar-in-each-loop
                var progressBar = document.querySelector(css_class);
                items           =level_records[i];
                console.log(items);
                delayedLoop(items, interval_array[i], function(item, index)
                    {
                        perc                    =((index + 1) / items.length * 100);
                        perc                    =(Math.round(perc * 100) / 100).toFixed(2);
                        var width               =perc + "%";
                        progressBar.style.width =width;
                        progressBar.innerHTML   =(index + 1) + '/' + items.length + ' - ' + items[index] + ' (' + width + ')';
                    }); 
            }*/
            //https://stackoverflow.com/questions/17957823/javascript-how-to-update-a-progress-bar-in-a-for-loop
            var i = 1;
            (function doSort()
                {
                    // update progress
                    css_class       =".progress-bar-"+i+" div";
                    //delayedloop-https://stackoverflow.com/questions/30987218/update-progressbar-in-each-loop
                    var progressBar     =document.querySelector(css_class);
                    items               =level_records[i];
                    items_count         =level_records[i].length;
                    interval_nextlevel  =items_count*1000;//count time for next level to start and pass to setTimout()
                    console.log(items_count);
                    //console.log(items);
                    delayedLoop(items, 1000, function(item, index)
                        {
                            perc                    =((index + 1) / items.length * 100);
                            perc                    =(Math.round(perc * 100) / 100).toFixed(2);
                            var width               =perc + "%";
                            progressBar.style.width =width;
                            progressBar.innerHTML   =(index + 1) + '/' + items.length + ' - ' + items[index] + ' (' + width + ')';
                        }); 


                    // do stuff
                    i++;
                    if (i <= size)
                    {
                        setTimeout(doSort, interval_nextlevel);
                    }
                })();




        })


    </script>

</head>
<body>
    <div class="progress-bar-1">
        <div style="width: 0">
        </div>
    </div>
    <div>interval</div>
    <div class="progress-bar-2">
        <div style="width: 0">
        </div>
    </div>

</body>

js first progressbar in loop not updating

1 Answers1