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:
var addImages = function(images) {
	var gallery = $('gallery');
	
	images.each(function(image) {
		gen_image (image.id);
		
		var el = new Element('div', {'class': 'picture'});
		var text = new Element('p').setHTML(image.description).injectInside(el);

		el.inject(gallery);
	});
}
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.
function doIntensive(array, steps, task, delay) {
  var i = 0, l = array.length;
  (function doStep() {
    var max = Math.min(i + steps, l);
    for (; i < max; i += 1) {
      task(array[i], i);
    }
    if (i < l) {
      setTimeout(doStep, delay || 10);
    }
  }());
}

doIntensive(new Array(10), 2, function (item, index) {
  console.log('doing step', index)
}, 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. :)