async अपडेट डोम से वादा - जावास्क्रिप्ट, डोम, एसिंक्रोनस, es6-वादा

मैं अपने वादों के माध्यम से डोम को अपडेट करना चाहता हूं। मैं वादों की एक सरणी का निर्माण करता हूं और उन्हें Promise.all के साथ चलाता हूं:

function test(i){
return Promise.resolve()
.then(function() {
// update the DOM
document.getElementById("progress").innerHTML += i;
return i;
});
}

var loadSequence = [];
// loop through all the frames!
for (var i = 0; i < 9999; i++) {
loadSequence.push(test(i));
}

Promise.all(loadSequence)
.then(function(){
window.console.log("all set...");
});

http://codepen.io/nicolasrannou/pen/jbEVwr

मैं वास्तविक समय में अपडेट होने के लिए DOM नहीं कर सकता। यह केवल DOM को अपडेट करता है जब मेरे सभी वादे हल हो गए हैं।

क्या यह अपेक्षित व्यवहार है? यदि हां, तो मैं अपने DOM को वास्तविक समय में अपडेट करने के लिए Promise.all का उपयोग कैसे कर सकता हूं?

मैं "सेटटाइमआउट (फ़ंक्शन, 1000)" हैक के बजाय वादों का उपयोग करना चाहता हूं, लेकिन मुझे इसे करने का अच्छा तरीका नहीं मिल रहा है।

उत्तर:

एक ब्राउज़र में, DOM कतार बदल जाती है और यदि वेमुख्य निष्पादन थ्रेड के बिना महान उत्तराधिकार में होता है लूप के लिए आपके मामले में कुछ "फ्री टिक्स" जैसे, वे एक बार में लागू किए जाएंगे जब जेएस डोम में हेरफेर कर रहा है। ले देख: https://stackoverflow.com/a/31229816/1207049

ब्राउज़र वातावरण में इसे दूर करने के लिए, आप उपयोग कर सकते हैं setTimeout मुख्य निष्पादन थ्रेड से अलग करने के लिए:

function test(i){
return Promise.resolve()
.then(function() {

// update the DOM
setTimeout(function() {
document.getElementById("progress").innerHTML += i;
}, 0);

return i;
});
}

के बिना setTimeout प्रत्येक निर्देश के भीतर के HTML को अद्यतन करने के लिएतत्व को उसी कतार के अंत में धकेल दिया जाता है। सेट टाइमआउट के साथ, यह हमेशा एक नई, खाली कतार में हो रहा है और मुख्य कतार में आइटम से पहले निष्पादित किया जा सकता है।