ugrás a tartalomhoz

Mootools tömb, elemenként

Meredith · 2011. Május. 30. (H), 15.57
Sziasztok!

Mootools használatával szeretném összehozni, azt, hogy lépkedjen végig egy tömb ellemein és ezeket egyesével jelenítse meg az oldalon.
Tehát, tegyük fel, hogy a tömbben van akár 200 elem, ráadásúl minden elemmel kell végezni valami műveletet is, igy a generálás nem zajlik le 1-2 másodperc alatt, hanem akár 1-2 percig is futhat a teljes kód.
Viszont én szeretném látni azokat az elemeket, ahol már kész a művelet. Tehát nem akarom a végen egyben megkapni a kész eredményt, hanem egyesével szépen.

Leegyszerűsitve, így néz ki a kódom eddig:
  1. var addImages = function(images) {  
  2.     var gallery = $('gallery');  
  3.       
  4.     images.each(function(image) {  
  5.         gen_image (image.id);  
  6.           
  7.         var el = new Element('div', {'class': 'picture'});  
  8.         var text = new Element('p').setHTML(image.description).injectInside(el);  
  9.   
  10.         el.inject(gallery);  
  11.     });  
  12. }  
Mint látjátok, minden elemnek létrehozok egy DIV-et, amiben minden féle adat lesz, de ez most lényegtelen. Hanem az a lényeg, hogy futtatok egy gen_image() függvényt is, ami kicsit belassítja a script futását a műveleteivel.
Szóval azt szeretném elérni, ha egy elemmel végzet a ciklus, akor jelenjen is meg az oldalon és ne kelljen megvárni mindet.

Google nem igazán volt a barátom ezügyben, bár lehet csak én nem voltam elég udvarias vele:)
Remélem itt érthető voltam.

Segítséget előre is köszönöm!
‹ CSS fix szélesség középen, de két oldalt különböző szín? jQuery AJAX callback függvényen belüli this ›
 ■
1

Egy szálon

Poetro · 2011. Május. 30. (H), 17.06
Mivel a JavaScript egy szálon fut, ezért egészen addig, amíg egy kód fut, addig nem történik semmi látható a képernyőn. Ahhoz, hogy látszódjon is valami kicsit vissza kell adni a vezérlést a böngészőnek, például azzal, hogy kis késleltetéssel futtatjuk a következő kódot. Azaz amikor megvan egy művelet, akkor setTimeout-tal indítjuk majd útjára a következőt és így tovább.

A következő kód például 2 elemet dolgoz fel a tömbből, majd visszaadja a vezérlést a böngészőnek 1 másodpercre.
  1. function doIntensive(array, steps, task, delay) {  
  2.   var i = 0, l = array.length;  
  3.   (function doStep() {  
  4.     var max = Math.min(i + steps, l);  
  5.     for (; i < max; i += 1) {  
  6.       task(array[i], i);  
  7.     }  
  8.     if (i < l) {  
  9.       setTimeout(doStep, delay || 10);  
  10.     }  
  11.   }());  
  12. }  
  13.   
  14. doIntensive(new Array(10), 2, function (item, index) {  
  15.   console.log('doing step', index)  
  16. }, 1000);  
2

MooTools Chain

Meredith · 2011. Május. 30. (H), 17.09
Nos, igazából sikerült megoldani a gondot:)
A megoldást a Mootools chain funkcíója jelentette.
Szépen lánca fűzőm a műveleteket és ahogy egy kész, jeleniti is meg. :)