如何更新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？

回答

相關問題