De for-loop kun je helaas niet zomaar onderbreken. Wat misschien wel werkt, is dit:
- Verzamel eerst alle keys (lijkt me niet zo CPU-intensief, en anders is je object gewoon te groot
)
- Splits die verzameling op door steeds een stukje te verwerken, en dan een timer te zetten
Nadeel is dat je dan weer asynchroon werkt, dus moet je even zorgen dat je een callback hebt voor als de taak klaar is
[JS]function printLevel(data, callback) {
var html = "";
var keys = Object.keys(data);
var i = 0, N = 20, pauseLength = 500;
function printKeys() {
for (var j = 0; j < N && i + j < keys.length; j++) {
var k = keys[i + j];
html += '<tr><td>' + printVariable(k) + '</td><td>' + printVariable(data[k]) + '</td></tr>';
}
i += N;
if (i < keys.length) {
setTimeout(printKeys, pauseLength);
}
else {
callback(html);
}
}
printKeys();
}[/JS]
Edit:
Ik vroeg me trouwens af: zowel in deze als in je andere post (over clonen) is de constructie zo dat de taak die uitgevoerd moet worden, herhaaldelijk onderbroken wordt met een
setTimeout. Als je
setTimeout slechts één keer aanroept, echter, wordt de taak ook gewoon asynchroon uitgevoerd. Doet dat je browser dan ook bevriezen? Ofwel: heb je echt baat bij het meerdere malen gebruiken van
setTimeout tegenover éénmalig gebruik?
[JS](function() {
function doAsync(f, callback, delay) {
setTimeout(function() {
var result = f();
if (callback) {
callback(result);
}
}, delay || 0);
}
function partial(f /*, args*/) {
var args = Array.prototype.slice.call(arguments, 1);
return function() {
var _args = [], i = 0, j = 0;
while (i < args.length || j < arguments.length) {
_args
= args !== undefined ? args : arguments[j++];
i++;
}
return f.apply(this, _args);
};
}
/*
function clone(obj) {
var c = new obj.constructor();
for (var k in obj) {
c[k] = typeof obj[k] == "object" && obj[k] != null ? clone(obj[k]) : obj[k];
}
return c;
}
function cloneCallback(original, clone) {
console.log(original, clone, original[3] === clone[3]); //false
}
var someLargeObject = ["A", "B", 6, {
c: "C"
}];
doAsync(partial(clone, someLargeObject), partial(cloneCallback, someLargeObject));
*/
function printLevel(data) {
/* Original printLevel function */
}
function printCallback(html) {
console.log("Done");
}
var data = {};
doAsync(partial(printLevel, data), printCallback);
})();[/JS]
