时间戳

首页 > 解决方案 > js循环中的第一个进度条不更新

javascript - js循环中的第一个进度条不更新

问题描述

我有两个要按顺序更新的进度条。在第一个进度条达到 100% 之后。然后，第二个进度条应该开始。进度条跟随数组键。a,b,c在第一个进度条和d,e,f第二个进度条上。但是，第一个进度在第一个任务处停止并继续运行第二个进度条。我曾尝试增加超时。但是，第一个任务仍然是第一个进度条。

<?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>

提前致谢。

标签： javascriptfor-loopprogress-bar

解决方案

我参考了这个并尝试用一个异步循环替换 for 循环，该循环使用setTimeout(). 我计算当前级别的项目列表，items_count。由于我在每个级别的项目中循环时放置了延迟 1000，因此我将从一个级别到另一个级别的延迟计算为items_count * 1000（如果 9 个项目将是 9000 延迟进入第二个进度条）。这解决了我的问题

<?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>

推荐阅读