Javascript:如何在"for"循环中更新进度栏 [英] Javascript: How to update a progress bar in a 'for' loop
问题描述
我要整理的JS脚本有问题.我有一个HTML表，其中包含300行.我做了一个排序功能，它将使表头可点击并启动我的排序功能.我想集成一个进度条，因为在较大的表(500-1000行)中，单击标题后，该表需要花费一些时间进行排序(IE是个大罪犯).进度条会告诉他们排序完成前还剩下多少时间.我想到的方法是一个div元素，我会根据排序循环的进度来调整其大小.问题是我似乎无法弄清楚如何将这样的例程集成到我的循环中.
我已经研究了这个问题并注意到了这一点:如何进行更改进度条是否在循环中?并且:使用setTimeout在以下情况下更新进度条遍历多个变量
第二个主题有一些演示，它们基本上按照进度条执行我想做的事情.但是，无论何时我尝试实施这两篇文章中显示的解决方案，我要么:
A-使浏览器崩溃
B-进度条似乎可以正常工作，但是从0-100％瞬间变大，而不是逐渐变大.
我希望有人可以带领我朝正确的方向去做.该表排序进度指示器必须使用本机JS完成，因为其内容必须可以脱机使用，因此我不能通过CDN包含任何jQuery库，并且不需要整个jQuery库使文档膨胀.
我用其中的代码创建了一个JS小提琴.我删除了进度条的代码，因为我一直使浏览器崩溃，因此脚本所能做的就是与排序相关的代码. jsfiddle
这是JS本身:
//更改此变量以使其与//将要对其进行操作的表.var tableID ="sortable";/***将点击事件附加到所有< th>表中的元素*调用tableSort()函数.此函数假定单元格表中第一行中的*是标头标签和那个单元格*其余行中的< td>数据标签.** @param table要使用的table元素.* @返回无效*/函数initHeaders(table){//获取表格元素表格= document.getElementById(表格);//获取标题行中的单元格数var l = table.rows [0] .cells.length;//循环浏览标题单元格并附加事件for(var i = 0; i< l; i ++){if(table.rows [0] .cells [i] .addEventListener){//对于现代浏览器table.rows [0] .cells [i] .addEventListener("click"，tableSort，false);} else if(table.rows [0] .cells [i] .attachEvent){//IE特定方法table.rows [0] .cells [i] .attachEvent("onclick"，tableSort);}}}/***比较表列中的值，然后对表行进行排序.*此函数的后续调用将在升序之间切换行*和降序排列方向.** @param e从浏览器传递的click事件.* @return mixed如果操作成功完成，则没有返回值；如果出错，则返回FALSE.*/函数tableSort(e){/***检查值是否为数字.** @param n要检查的传入值.* @return bool如果值是数字，则为TRUE，否则为FALSE.*/tableSort.isNumeric =函数(n){var num = false;if(！isNaN(n)&&isFinite(n)){num = true;}返回num;}//从传递的click事件中获取元素.if(e.currentTarget){//对于现代浏览器e = e.currentTarget;} else if(window.event.srcElement){//IE特定方法e = window.event.srcElement;} 别的 {console.log(无法确定源事件.正在终止....");返回false；}//获取单元格的索引，稍后将需要var ndx = e.cellIndex;//根据元素的id属性在"asc"和"desc"之间切换if(e.id =="asc"){e.id ="desc";} 别的 {e.id ="asc";}//从< th>上移单击并找到父表元素.var parent = e.parentElement;var s = parent.tagName;while(s.toLowerCase()！=表"){parent = parent.parentElement;s = parent.tagName;}/*执行两个不同的循环.一个"for"循环来控制多少表行的传递次数，以寻找要排序的值和"while"循环执行值的实际比较.为"循环还控制嵌入式"while"循环将执行多少次从每次迭代开始运行，至少要强制插入一个表行正确的位置.*///var interval = setInterval(function(){progress.updateProgress()}，100);var rows = parent.tBodies [0] .rows.length;//仅对< tbody>中的行进行隔离和计数元素.if(rows> 1){//确保有足够的行来烦扰排序var v1;//值1的占位符var v2;//值2的占位符var tbody = parent.tBodies [0];//表体进行操作//启动for循环(控制表传递的数量)for(i = 0; i< rows; i ++){var j = 0;//交换例程的计数器var offset = rows-i-1;//停止下一个循环//想在这里更新进度条//启动while循环(控制进行比较的次数)while(j< offset){//检查以确保可以提取值，然后再继续if(typeof tbody.rows [j] .cells [ndx] .innerHTML！==未定义& typeof tbody.rows [j + 1] .cells [ndx] .innerHTML！==未定义){//获取单元格值并进行比较v1 = tbody.rows [j] .cells [ndx] .innerHTML;v2 = tbody.rows [j + 1] .cells [ndx] .innerHTML;if(tableSort.isNumeric(v1)&&tableSort.isNumeric(v2)){//处理两个数字v1 =新编号(v1);v2 =新编号(v2)；if(v1> v2){if(e.id =="asc"){//v1下移tbody.insertBefore(tbody.rows [j + 1]，tbody.rows [j]);}} 别的 {if(e.id =="desc"){//v1下移tbody.insertBefore(tbody.rows [j + 1]，tbody.rows [j]);}}} else if(tableSort.isNumeric(v1)&&！tableSort.isNumeric(v2)){//v2是一个字符串，v1是一个数字，并自动获胜if(e.id =="asc"){//v1下移tbody.insertBefore(tbody.rows [j + 1]，tbody.rows [j]);}} else if(！tableSort.isNumeric(v1)&& tableSort.isNumeric(v2)){//v1是一个字符串，v2是一个数字，并自动获胜if(e.id =="desc"){//v1下移tbody.insertBefore(tbody.rows [j + 1]，tbody.rows [j]);}} 别的 {//v1和v2都是字符串，请使用localeCompare()if(v1.localeCompare(v2)> 0){if(e.id =="asc"){//v1下移tbody.insertBefore(tbody.rows [j + 1]，tbody.rows [j]);}} 别的 {if(e.id =="desc"){//v1下移tbody.insertBefore(tbody.rows [j + 1]，tbody.rows [j]);}}}j ++;} 别的 {console.log(其中一个值未定义");}}}}}//等待直到DOM准备就绪，然后初始化表头.window.onload = function(){initHeaders(tableID);}
在此先感谢任何可以向我指出正确方向的人.
---------- 好吧，在阅读完这里的答案并对我的工作方式进行了一些大的修改之后，我想出了一个更好的解决方案.进度栏不是我想要的，但是很接近.(尽管我认为它正出现在页面上，正好是排序准备完成的时候.)
我修改了循环以进行O(n log n)快速排序，而不是直接修改DOM，而是隔离表行进行排序并将其复制到数组中.然后，我直接在数组上进行排序，完成后，我将重建行，然后删除旧行并追加新行.排序时间已大大减少.
看看: http://jsfiddle.net/jnBmp/5/
这是新的JS代码:
//更改此变量以使其与//将要对其进行操作的表.var tableID ="sortable";/***将点击事件附加到所有< th>表中的元素*调用tableSort()函数.此函数假定单元格表中第一行中的*是标头标签和那个单元格*其余行中的< td>数据标签.** @param table要使用的table元素.* @返回无效*/函数initHeaders(table){//获取表格元素表格= document.getElementById(表格);//获取标题行中的单元格数var l = table.rows [0] .cells.length;//循环浏览标题单元格并附加事件for(var i = 0; i< l; i ++){if(table.rows [0] .cells [i] .addEventListener){//对于现代浏览器table.rows [0] .cells [i] .addEventListener("click"，tableSort，false);} else if(table.rows [0] .cells [i] .attachEvent){//IE特定方法table.rows [0] .cells [i] .attachEvent("onclick"，tableSort);}}}函数tableSort(e){var runs = 0;var pix = 0;var ndx = 0;var dir ="right";var interval = false;//从传递的click事件中获取元素.if(e.currentTarget){//对于现代浏览器e = e.currentTarget;} else if(window.event.srcElement){//IE特定方法e = window.event.srcElement;} 别的 {console.log(无法确定源事件.正在终止....");返回false；}//获取单元格的索引，稍后将需要ndx = e.cellIndex;//根据元素的id属性在"asc"和"desc"之间切换if(e.id =="asc"){e.id ="desc";} 别的 {e.id ="asc";}//从< th>上移单击并找到父表元素.var parent = e.parentElement;var s = parent.tagName;while(s.toLowerCase()！=表"){parent = parent.parentElement;s = parent.tagName;}//获取要作为数组进行操作的行var rows = document.getElementById("replace").rows;var a = new Array();for(i = 0; i< rows.length; i ++){a.push(rows [i]);}//显示进度条document.getElementById("progress").style.display ="block";/***显示进度栏股票动画** @param pix用于设置< div>的当前像素数.保证金*/函数updateTicker(pix){var tick = document.getElementById("progressTicker");document.getElementById("progressText").style.display ="block";document.getElementById("progressText").innerHTML =排序表...请稍候";if(dir =="right"){if(pix< 170){像素+ = 5;tick.style.marginLeft = pix +"px";} 别的 {dir =左";}} 别的 {if(pix> 0){像素-= 5;tick.style.marginLeft = pix +"px";} 别的 {dir =左";}}interval = window.setTimeout(function(){updateTicker(pix);}，25);}updateTicker(pix);/***检查值是否为数字.** @param n要检查的传入值.* @return bool如果值是数字，则为TRUE，否则为FALSE.*/isNumeric =函数(n){var num = false;if(！isNaN(n)&&isFinite(n)){num = true;}返回num;}/***比较两个值并确定哪个值更大.** @param x要检查的参考值.* @param y要确定的值大于或小于参考值.* @return如果y大于或等于x，则为TRUE，否则为FALSE*/函数compare(x，y){var large = false;x = x.cells [ndx] .textContent;y = y.cells [ndx] .textContent;//console.log(e.id);if(isNumeric(x)&& isNumeric(y)){if(y> = x){更大=(e.id =="asc")?真假;} 别的 {更大=(e.id =="desc")?真假;}} 别的 {if(y.localeCompare(x)> = 0){更大=(e.id =="asc")?真假;} 别的 {更大=(e.id =="desc")?真假;}}返回更大}/***对数组执行快速排序O(n log n).** @param array需要排序的数组* @return array排序后的数组.*/函数nlognSort(array){运行++if(array.length> 1){var big = new Array();var small = new Array();varivot = array.pop();var l = array.length;for(i = 0; i< l; i ++){if(compare(pivot，array [i])){big.push(array [i]);} 别的 {small.push(array [i]);}}返回Array.prototype.concat(nlognSort(small)，pivot，nlognSort(big));} 别的 {返回数组；}}//运行排序例程b = nlognSort(a);//重建< tbody>并用旧的替换新的var tbody = document.createElement("tbody");var l = b.length;for(i = 0; i< l; i ++){tbody.appendChild(b.shift());}parent.removeChild(document.getElementById("replace"));parent.appendChild(tbody);tbody.setAttribute("id"，"replace");setTimeout(function(){document.getElementById("progress").style.display ="none";document.getElementById("progressText").style.display ="none";clearTimeout(interval);}，1500)；}window.onload = function(){initHeaders(tableID);} 再次感谢大家！
看看以下内容:
http://jsfiddle.net/6JxQk/
这里的想法是将您的for循环替换为使用 setTimeout()的异步循环，因此您可以使用以下代码:
for(var i = 0; i< rows; i ++){//做东西} ...对此:
var i = 0;(函数doSort(){//更新进度//做东西i ++;如果(i<行){setTimeout(doSort，0);}})(); 尽管您可以看到，但这会极大地降低排序例程的速度，因为除了更新进度条之外，这还将对表的行进行重新排序.考虑到这一点，我认为您最好只使用内置排序而不是自己的实现，并放下进度条.
I am have an issue with a JS script I am trying to put together. I have an HTML table with somewhere in the neighborhood of 300 rows in it. I have made a sort function that will make the table headers clickable and launch my sort function. I would like to integrate a progress bar because in larger tables (500 - 1000 rows) after a header is clicked the table takes a bit of time to sort (IE is a big offender). The progress bar would tell them how much time remains before the sort is complete. The method I had in mind was a div element that I would resize based on the progression of the sort loop. The problem is that I can't seem to figure out how to integrate such a routine into my loop.
I've researched the issue and taken note of this: How to change progress bar in loop? and this: Using setTimeout to update progress bar when looping over multiple variables
The second topic has a few demos that do essentially what I would like to do as far as the progress bar goes. However, anytime I try to implement the solutions shown in those two posts I either:
A - Crash the browser
B - Progress bar appears to work, but goes from 0 - 100% instantly, not progressively.
I am hoping someone can lead me in the right direction on what to do. This table sort progress indicator must be done using native JS because the contents must be available offline, hence I can't include any jQuery libraries via CDN and bloating the document with the entire jQuery library isn't desired.
I've created a JS fiddle with my code in it. I've stripped out what I had for progress bar code because I kept crashing the browser so all that is there as far as scripts go is the sorting-related code. jsfiddle
Here is the JS itself:
//Change this variable to match the "id" attribute of the
//table that is going to be operated on.
var tableID = "sortable";
/**
* Attach click events to all the <th> elements in a table to
* call the tableSort() function. This function assumes that cells
* in the first row in a table are <th> headers tags and that cells
* in the remaining rows are <td> data tags.
*
* @param table The table element to work with.
* @return void
*/
function initHeaders(table) {
//Get the table element
table = document.getElementById(table);
//Get the number of cells in the header row
var l = table.rows[0].cells.length;
//Loop through the header cells and attach the events
for(var i = 0; i < l; i++) {
if(table.rows[0].cells[i].addEventListener) { //For modern browsers
table.rows[0].cells[i].addEventListener("click", tableSort, false);
} else if(table.rows[0].cells[i].attachEvent) { //IE specific method
table.rows[0].cells[i].attachEvent("onclick", tableSort);
}
}
}
/**
* Compares values in a column of a table and then sorts the table rows.
* Subsequent calls to this function will toggle a row between ascending
* and descending sort directions.
*
* @param e The click event passed in from the browser.
* @return mixed No return value if operation completes successfully, FALSE on error.
*/
function tableSort(e) {
/**
* Checks to see if a value is numeric.
*
* @param n The incoming value to check.
* @return bool TRUE if value is numeric, FALSE otherwise.
*/
tableSort.isNumeric = function (n) {
var num = false;
if(!isNaN(n) && isFinite(n)) {
num = true;
}
return num;
}
//Get the element from the click event that was passed.
if(e.currentTarget) { //For modern browsers
e = e.currentTarget;
} else if(window.event.srcElement) { //IE specific method
e = window.event.srcElement;
} else {
console.log("Unable to determine source event. Terminating....");
return false;
}
//Get the index of the cell, will be needed later
var ndx = e.cellIndex;
//Toggle between "asc" and "desc" depending on element's id attribute
if(e.id == "asc") {
e.id = "desc";
} else {
e.id = "asc";
}
//Move up from the <th> that was clicked and find the parent table element.
var parent = e.parentElement;
var s = parent.tagName;
while(s.toLowerCase() != "table") {
parent = parent.parentElement;
s = parent.tagName;
}
/*
Executes two different loops. A "for" loop to control how many
times the table rows are passed looking for values to sort and a
"while" loop that does the actual comparing of values. The "for"
loop also controls how many times the embedded "while" loop will
run since each iteration with force at least one table row into
the correct position.
*/
//var interval = setInterval( function () { progress.updateProgress() } , 100);
var rows = parent.tBodies[0].rows.length; //Isolate and count rows only in the <tbody> element.
if(rows > 1) { //Make sure there are enough rows to bother with sorting
var v1; //Value 1 placeholder
var v2; //Value 2 placeholder
var tbody = parent.tBodies[0]; //Table body to manipulate
//Start the for loop (controls amount of table passes)
for(i = 0; i < rows; i++) {
var j = 0; //Counter for swapping routine
var offset = rows - i - 1; //Stops next loop from overchecking
// WANT TO UPDATE PROGRESS BAR HERE
//Start the while loop (controls number of comparisons to make)
while(j < offset) {
//Check to make sure values can be extracted before proceeding
if(typeof tbody.rows[j].cells[ndx].innerHTML !== undefined && typeof tbody.rows[j + 1].cells[ndx].innerHTML !== undefined) {
//Get cell values and compare
v1 = tbody.rows[j].cells[ndx].innerHTML;
v2 = tbody.rows[j + 1].cells[ndx].innerHTML;
if(tableSort.isNumeric(v1) && tableSort.isNumeric(v2)) {
//Dealing with two numbers
v1 = new Number(v1);
v2 = new Number(v2);
if(v1 > v2) {
if(e.id == "asc") { //v1 moves down
tbody.insertBefore(tbody.rows[j + 1], tbody.rows[j]);
}
} else {
if(e.id == "desc") { //v1 moves down
tbody.insertBefore(tbody.rows[j + 1], tbody.rows[j]);
}
}
} else if(tableSort.isNumeric(v1) && !tableSort.isNumeric(v2)) {
//v2 is a string, v1 is a number and automatically wins
if(e.id == "asc") { //v1 moves down
tbody.insertBefore(tbody.rows[j + 1], tbody.rows[j]);
}
} else if(!tableSort.isNumeric(v1) && tableSort.isNumeric(v2)) {
//v1 is a string, v2 is a number and automatically wins
if(e.id == "desc") { //v1 moves down
tbody.insertBefore(tbody.rows[j + 1], tbody.rows[j]);
}
} else {
//Both v1 and v2 are strings, use localeCompare()
if(v1.localeCompare(v2) > 0) {
if(e.id == "asc") { //v1 moves down
tbody.insertBefore(tbody.rows[j + 1], tbody.rows[j]);
}
} else {
if(e.id == "desc") { //v1 moves down
tbody.insertBefore(tbody.rows[j + 1], tbody.rows[j]);
}
}
}
j++;
} else {
console.log("One of the values turned up undefined");
}
}
}
}
}
//Wait until DOM is ready and then initialize the table headers.
window.onload = function () {
initHeaders(tableID);
}
Thanks in advance to anyone who can point me in the right direction.
----- EDIT: ----- Okay so after reading the answers here and making some hefty modifications to how I was going about things I have come up with a much better solution. The progress bar isn't exactly what I wanted, but it is close. (Although I believe that it is showing up on the page just as the sorting is getting ready to finish up.)
I modified my loop to do a O(n log n) quick sort and instead of modifying the DOM directly I instead isolate the table rows to sort and copy them into an array. I then do the sort directly on the array and once it is finished I rebuild the rows and then remove the old rows and append the new ones in. The sort time has been reduced significantly.
Have a look: http://jsfiddle.net/jnBmp/5/
And here is the new JS code:
//Change this variable to match the "id" attribute of the
//table that is going to be operated on.
var tableID = "sortable";
/**
* Attach click events to all the <th> elements in a table to
* call the tableSort() function. This function assumes that cells
* in the first row in a table are <th> headers tags and that cells
* in the remaining rows are <td> data tags.
*
* @param table The table element to work with.
* @return void
*/
function initHeaders(table) {
//Get the table element
table = document.getElementById(table);
//Get the number of cells in the header row
var l = table.rows[0].cells.length;
//Loop through the header cells and attach the events
for(var i = 0; i < l; i++) {
if(table.rows[0].cells[i].addEventListener) { //For modern browsers
table.rows[0].cells[i].addEventListener("click", tableSort, false);
} else if(table.rows[0].cells[i].attachEvent) { //IE specific method
table.rows[0].cells[i].attachEvent("onclick", tableSort);
}
}
}
function tableSort(e) {
var runs = 0;
var pix = 0;
var ndx = 0;
var dir = "right";
var interval = false;
//Get the element from the click event that was passed.
if(e.currentTarget) { //For modern browsers
e = e.currentTarget;
} else if(window.event.srcElement) { //IE specific method
e = window.event.srcElement;
} else {
console.log("Unable to determine source event. Terminating....");
return false;
}
//Get the index of the cell, will be needed later
ndx = e.cellIndex;
//Toggle between "asc" and "desc" depending on element's id attribute
if(e.id == "asc") {
e.id = "desc";
} else {
e.id = "asc";
}
//Move up from the <th> that was clicked and find the parent table element.
var parent = e.parentElement;
var s = parent.tagName;
while(s.toLowerCase() != "table") {
parent = parent.parentElement;
s = parent.tagName;
}
//Get the rows to operate on as an array
var rows = document.getElementById("replace").rows;
var a = new Array();
for(i = 0; i < rows.length; i++) {
a.push(rows[i]);
}
//Show progress bar ticker
document.getElementById("progress").style.display = "block";
/**
* Show the progress bar ticker animation
*
* @param pix The current pixel count to set the <div> margin at.
*/
function updateTicker(pix) {
var tick = document.getElementById("progressTicker");
document.getElementById("progressText").style.display = "block";
document.getElementById("progressText").innerHTML = "Sorting table...please wait";
if(dir == "right") {
if(pix < 170) {
pix += 5;
tick.style.marginLeft = pix + "px";
} else {
dir = "left";
}
} else {
if(pix > 0) {
pix -= 5;
tick.style.marginLeft = pix + "px";
} else {
dir = "left";
}
}
interval = window.setTimeout( function () { updateTicker(pix); }, 25);
}
updateTicker(pix);
/**
* Checks to see if a value is numeric.
*
* @param n The incoming value to check.
* @return bool TRUE if value is numeric, FALSE otherwise.
*/
isNumeric = function (n) {
var num = false;
if(!isNaN(n) && isFinite(n)) {
num = true;
}
return num;
}
/**
* Compares two values and determines which one is "bigger".
*
* @param x A reference value to check against.
* @param y The value to be determined bigger or smaller than the reference.
* @return TRUE if y is greater or equal to x, FALSE otherwise
*/
function compare(x, y) {
var bigger = false;
x = x.cells[ndx].textContent;
y = y.cells[ndx].textContent;
//console.log(e.id);
if(isNumeric(x) && isNumeric(y)) {
if(y >= x) {
bigger = (e.id == "asc") ? true : false;
} else {
bigger = (e.id == "desc") ? true : false;
}
} else {
if(y.localeCompare(x) >= 0) {
bigger = (e.id == "asc") ? true : false;
} else {
bigger = (e.id == "desc") ? true : false;
}
}
return bigger;
}
/**
* Performs a quicksort O(n log n) on an array.
*
* @param array The array that needs sorting
* @return array The sorted array.
*/
function nlognSort(array) {
runs++
if(array.length > 1) {
var big = new Array();
var small = new Array();
var pivot = array.pop();
var l = array.length;
for(i = 0; i < l; i++) {
if(compare(pivot,array[i])) {
big.push(array[i]);
} else {
small.push(array[i]);
}
}
return Array.prototype.concat(nlognSort(small), pivot, nlognSort(big));
} else {
return array;
}
}
//Run sort routine
b = nlognSort(a);
//Rebuild <tbody> and replace new with the old
var tbody = document.createElement("tbody");
var l = b.length;
for(i = 0; i < l; i++) {
tbody.appendChild(b.shift());
}
parent.removeChild(document.getElementById("replace"));
parent.appendChild(tbody);
tbody.setAttribute("id","replace");
setTimeout(function () {
document.getElementById("progress").style.display = "none";
document.getElementById("progressText").style.display = "none";
clearTimeout(interval);
},1500);
}
window.onload = function() {
initHeaders(tableID);
}
Thanks again everyone!!
Take a look at the following:
http://jsfiddle.net/6JxQk/
The idea here is to replace your for loop with an asynchronous loop that uses setTimeout(), so you would go from the following:
for (var i = 0; i < rows; i++) {
// do stuff
}
... to this:
var i = 0;
(function doSort() {
// update progress
// do stuff
i++;
if (i < rows) {
setTimeout(doSort, 0);
}
})();
Although as you can see, this significantly slows down your sorting routine because in addition to updating the progress bar, this will reorder the rows of your table. With this in mind I think you are better off just using a built-in sort rather than your own implementation, and dropping the progress bar.
这篇关于Javascript:如何在"for"循环中更新进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
