如何更新javascript/jquery中for循环的每次迭代所显示的html？

我将如何在循环的每次迭代中都有h1更改？此代码现在仅在完成所有操作后才显示h1文本。如何更新javascript/jquery中for循环的每次迭代所显示的html？

for (i=0; i<array.length; i++) { 
    $("body > h1").text("Processing #" + i); 
    // things that take a while to do 
}

附加信息：如果我调整窗口的大小，因为它循环，html更新。

来源

2013-02-27 user1413341

浏览器将不会呈现，直到你获得控制权交还给它。这意味着它不会呈现，直到你离开for循环。但通常有一些技巧迫使它重新渲染。虽然我真的建议你重写你的循环，以便在每次迭代时向浏览器屈服，并在之后继续......所以窗口不会锁定用户。 – Brandon 2013-02-27 22:23:49

“虽然我真的建议你重写你的循环，让浏览器每次迭代，然后继续” 我该怎么做？谢谢。 – user1413341 2013-02-27 22:28:13

我给我的答案添加了一个例子。 – Brandon 2013-02-27 22:39:42

有时你可以强制迫使布局

for (i=0; i<array.length; i++) { 
    $("body > h1").text("Processing #" + i) 
     .width(); // force browser to recalculate layout 
    // things that take a while to do 
}

的重新计算它可能无法在所有的浏览器渲染。

一种更好的方式，这并不阻止浏览器那么多：

function doThings(array) { 
    var queueWork, 
     i = -1, 
     work = function() { 
      // do work for array[i] 
      // ... 
      queueWork(); 
     }; 

    queueWork = function() { 
     if (++i < array.length) { 
      $("body > h1").text("Processing #" + i); 
      setTimeout(work, 0); // yield to browser 
     } 
    }; 
} 


doThings(yourArray);

来源

2013-02-27 22:21:10 Brandon

var array = ['one', 'two', 'three'] 
var i = 0; 

var refreshIntervalId = setInterval(function() { 
    length = array.length; 
    if (i < (array.length +1)) { 
     $("h1").text("Processing #" + i); 
    } else { 
     clearInterval(refreshIntervalId); 
    } 
    i++  
}, 1000);

http://jsfiddle.net/3fj9E/

来源

2013-02-27 22:29:48

使用setInterval有一毫秒的延迟：

var i=0, j=array.length; 
var iv = setInterval(function() { 
    $("h1").text("Processing #" + i); 
    // things that take a while to do 
    if (++i>=j) clearInterval(iv); 
}, 1);

http://jsfiddle.net/mblase75/sP9p7/

来源

2013-02-27 22:35:54 Blazemonger

DEMO

我花了一些时间来研究一个jquery函数，似乎解决了这个问题。基本上，它是一个流程处理程序，您可以将任意数量的进程以run以异步方式依次调用这些进程。

$.fn.LongProcess = function() { 
    var _this = this; 
    this.notifications = []; 
    this.actions = []; 

    this.add = function (_notification, _action) { 
     this.notifications.push(_notification); 
     this.actions.push(_action); 
    }; 
    this.run = function() { 

     if (!_this.actions && !_this.notifications) { 
      return "Empty"; 
     } 
     //****************************************************************** 
     //This section makes the actions lag one step behind the notifications. 
     var notification = null; 
     if (_this.notifications.length > 0) notification = _this.notifications.shift(); 

     var action = null; 
     if ((_this.actions.length >= _this.notifications.length + 2) || (_this.actions.length > 0 && _this.notifications.length == 0)) 
      action = _this.actions.shift(); 
     //**************************************************************** 
     if (!action && !notification) { 
      return "Completed"; 
     } 

     if (action) action();   
     if (notification) notification(); 

     setTimeout(_this.run, 1000); 
     //setTimeout(_this.run,1); //set to 1 after you've entered your actual long running process. The 1000 is there to just show the delay. 
    } 
    return this; 
};

如何与<h1 class="processStatus"></h1>使用：

$(function() { 
    var process = $().LongProcess(); 

    //process.add(notification function, action function); 
    process.add(function() { 
     $(".processStatus").text("process1"); 
    }, function() { 
     //..long process stuff 
     alert("long process 1"); 
    }); 

    process.add(function() { 
     $(".processStatus").text("process2"); 
    }, function() { 
     //..long process stuff 
     alert("long process 2"); 
    }); 

    process.add(function() { 
     $(".processStatus").text("process3"); 
    }, function() { 
     //..long process stuff 
     alert("long process 3"); 
    }); 

    process.run(); 
});

来源

2013-02-28 17:20:28

如果这个过程是很长的，你可以使用这个脚本显示特定时间段的所有通知。

这里是代码..

HTML

<div id="ccNotificationBox"></div>

CSS

#ccNotificationBox{ 
-webkit-animation-name:; 
-webkit-animation-duration:2s;/*Notification duration*/ 
box-sizing:border-box; 
border-radius:16px; 
padding:16px; 
background-color:rgba(0,0,0,0.7); 
top:-100%; 
right:16px; 
position:fixed; 
color:#fff; 
} 
#ccNotificationBox.active{ 
-webkit-animation-name:note; 
top:16px; 
} 
@-webkit-keyframes note{ 
0% {opacity:0;} 
20% {opacity:1;} 
80% {opacity:1;} 
100% {opacity:0;} 
}

的JavaScript

var coccoNotification=(function(){ 
var 
nA=[], 
nB, 
rdy=true; 
function nP(a){ 
nA.push(a); 
!rdy||(nR(),rdy=false); 
} 
function nR(){ 
nB.innerHTML=nA[0];console.log(nA[0]); 
nB.offsetWidth=nB.offsetWidth;//reflow ios 
nB.classList.add('active'); 
} 
function nC(){ 
nB.classList.remove('active'); 
nB.innerHTML=''; 
nA.shift(); 
nA.length>0?nR():(rdy=true); 
} 
function init(){ 
nB=document.getElementById('ccNotificationBox'); 
nB.addEventListener('webkitAnimationEnd',nC,false); 
window.removeEventListener('load',init,false); 
} 
window.addEventListener('load',init,false); 
return nP 
})();

用法

coccoNotification('notification 1');

例如

http://jsfiddle.net/f6dkE/1/

信息

上面的例子是完美的外部JS，你只使用一个全局变量，它的名字的功能...在我的情况下coccoNotification

这里是一个不同的方法，但它同样

http://jsfiddle.net/ZXL4q/11/

来源

2013-11-22 15:50:35 cocco

如何更新javascript/jquery中for循环的每次迭代所显示的html？

回答

相关问题