Question

早上好，我有for循环的问题，我试图在页面上制作乘法进度条，我尝试在一个动作中将它们分开：

function startProgressbaring(){

var progressArray = [ 
    progress1 = document.querySelector('.progressbar-1'),
    progress2 = document.querySelector('.progressbar-2'),
    progress3 = document.querySelector('.progressbar-3'),
    progress4 = document.querySelector('.progressbar-4'),
    progress5 = document.querySelector('.progressbar-5'),
    progress6 = document.querySelector('.progressbar-6')
];
var durationArray = [ 
     progress1_Duration = 90,
     progress2_Duration = 65,
     progress3_Duration = 70,
     progress4_Duration = 55,
     progress5_Duration = 95,
     progress6_Duration = 90
];

var id = setInterval(frame,30);
var width = 1;





        function frame(){
        for(var z=0; z<durationArray.length; z++){  

            if(width>durationArray[z]){
                clearInterval(id);
                console.log(durationArray[z]);
            }else {
                width++;
                progressArray[z].style.width = width + '%';
            }
        }

        };

例如，带有durationArray的控制台日志仅返回55 六个进度条的值介于56和60之间，而不是来自durationArray的值，不知道什么是错的，谢谢你的任何建议

Answer 1

问题是，你做了

clearInterval(id);

如果其中一个帧达到其宽度。这也会自动阻止其他人。如果一切都结束可能会停止：

function frame(){
 var running=false;
 for(var z=0; z<durationArray.length; z++){  
        if(width>durationArray[z]){
            console.log(durationArray[z]);
        }else {
            running=true;
            width++;
            progressArray[z].style.width = width + '%';
       }         
  }
  if(!running) clearInterval(id);
};

Answer 2

我不了解您要完成的任务，但可以解释代码。您没有将进度条的宽度设置为durationArray中的任何值，而是将进度条设置为宽度值：progressArray[z].style.width = width + '%';。 width最终将大于durationArray中的最小值。发生这种情况时，请使用clearInterval停止间隔。 width循环迭代最后一次会增加几次{。}}。

Answer 3

在代码中添加一行日志记录并观察输出（见下文）。 Basicall会发生什么：

您的宽度从值1开始，并随着每次迭代而增加
迭代6项数组9次后，宽度值为 54
您的迭代达到progress4_Duration，宽度= 58（54 + 4）
宽度＆gt; durationArray [z]条件为真，间隔清除，处理停止。

假设您只需要停止特定进度条的迭代，可能需要一个进程ID数组，并且只停止具有足够宽度的进程ID。

function startProgressbaring(){

    var progressArray = [ 
        progress1 = document.querySelector('.progressbar-1'),
        progress2 = document.querySelector('.progressbar-2'),
        progress3 = document.querySelector('.progressbar-3'),
        progress4 = document.querySelector('.progressbar-4'),
        progress5 = document.querySelector('.progressbar-5'),
        progress6 = document.querySelector('.progressbar-6')
    ];
    var durationArray = [ 
         progress1_Duration = 90,
         progress2_Duration = 65,
         progress3_Duration = 70,
         progress4_Duration = 55,
         progress5_Duration = 95,
         progress6_Duration = 90
    ];

    var intervalArray = [];
    durationArray.forEach(function(d) {
        intervalArray.push(setInterval(frame,1000))
    });

    //var id = setInterval(frame,1000);
    var width = 1;

    function frame(){
        for(var z=0; z<durationArray.length; z++){  

            // debug output
            //console.log(width, durationArray[z]);

            if(width>durationArray[z]){
                //clearInterval(id);
                clearInterval(intervalArray[z]);
                console.log(durationArray[z]);
            } else {
                width++;
                progressArray[z].style.width = width + '%';
            }
        }
    }
}

for循环迭代奇怪

3 个答案: