completo - ¿Cómo puedo devolver el control(brevemente) al navegador durante el procesamiento intensivo de JavaScript?
manual javascript pdf 2018 (4)
Aquí hay una solución:
function appendToSelect() {
$("#mySelect").children().remove();
$("#mySelect").html(
''<option selected value="''+obj.data[0].value+''">''
+ obj.data[0].name
+ ''</option>''
);
obj.data.splice(0, 1); // we only want remaining data
var appendOptions = function() {
var dataChunk = obj.data.splice(0, 10); // configure this last number (the size of the ''chunk'') to suit your needs
for(var i = 0; i < dataChunk.length; i++) {
$("#mySelect").append(
''<option value="'' + dataChunk[i].value + ''">''
+ dataChunk[i].name
+ ''</option>''
);
}
if(obj.data.length > 0) {
setTimeout(appendOptions, 100); // change time to suit needs
}
};
appendOptions(); // kicks it off
}
No es tan elegante como @Borgar''s solución @Borgar''s , pero entiendes la idea. Básicamente, estoy haciendo lo mismo, pero todo en tu función en vez de dividirla en una función de orden superior como lo hace él. Me gusta su solución, pero si no lo hace, quizás esto funcione para usted.
EDITAR: para aquellos que no lo ven de inmediato, una de las principales diferencias entre esta solución y @Borgar''s es que esta solución le permite establecer el tamaño de los "fragmentos" de datos que se procesan entre cada tiempo de espera. @Borgar''s espera de @Borgar''s después de que se procesa cada miembro de la matriz. Si tengo tiempo, intentaré crear una función de orden superior para manejar esto, de modo que sea más elegante. ¡Sin promesas! ;)
EDITAR: Entonces, aquí está mi adaptación de @Borgar''s solución @Borgar''s , que permite establecer un tamaño de ''porción'' y configurar el valor de tiempo de espera más fácilmente:
function incrementallyProcess(workerCallback, data, chunkSize, timeout, completionCallback) {
var itemIndex = 0;
(function() {
var remainingDataLength = (data.length - itemIndex);
var currentChunkSize = (remainingDataLength >= chunkSize) ? chunkSize : remainingDataLength;
if(itemIndex < data.length) {
while(currentChunkSize--) {
workerCallback(data[itemIndex++]);
}
setTimeout(arguments.callee, timeout);
} else if(completionCallback) {
completionCallback();
}
})();
}
function appendToSelect() {
$("#mySelect").children().remove();
$("#mySelect").html(
''<option selected value="'' + obj.data[0].value + ''">''
+ obj.data[0].name
+ ''</option>''
);
obj.data.splice(0,1); // we only want remaining data
incrementallyProcess(function(data) {
$("#mySelect").append(
''<option value="'' + data.value + ''">''
+ data.name
+ ''</option>''
);
}, obj.data, 10, 100, removeAnimatedGifFunction); // last function not required...
}
Espero que eso ayude, creo que esto combina lo mejor de ambas soluciones. Tenga en cuenta que la segunda función anónima ya no usa el valor del índice, simplemente transfiere el objeto completo (con el valor y las propiedades del nombre); eso lo hace un poco más limpio, ya que el índice del objeto actual realmente no es tan útil cuando se itera sobre cosas, IMO.
Estoy seguro de que todavía hay cosas que se podrían hacer para mejorar esto, pero eso queda como un ejercicio para el lector. ;)
He leído la publicación here sobre el uso de setTimeout () durante el procesamiento intensivo de DOM (usando JavaScript), pero ¿cómo puedo integrar esta función con el siguiente código? El siguiente código funciona bien para un número pequeño de opciones, pero cuando el número de opciones aumenta demasiado, mi GIF animado "por favor espere" se congela mientras se procesa el JavaScript local. ¡Gracias!
function appendToSelect() {
$("#mySelect").children().remove() ;
$("#mySelect").html(
''<option selected value="'' + obj.data[0].value + ''">''
+ obj.data[0].name
+ ''</option>''
);
var j = 1 ;
for (var i = 1; i < obj.data.length; i++) {
$("#mySelect").append(
''<option value="'' + obj.data[i].value + ''">''
+ obj.data[i].name
+ ''</option>''
);
}
}
Da la casualidad de que estaba publicando sobre esto hace un momento here . Aquí hay una función de bucle cronometrada:
function processLoop( actionFunc, numTimes, doneFunc ) {
var i = 0;
var f = function () {
if (i < numTimes) {
actionFunc( i++ ); // closure on i
setTimeout( f, 10 )
}
else if (doneFunc) {
doneFunc();
}
};
f();
}
Para su situación, esto se usaría así:
function appendToSelect () {
$("#mySelect").children().remove() ;
$("#mySelect").html(
''<option selected value="'' + obj.data[0].value + ''">''
+ obj.data[0].name
+ ''</option>''
);
var j = 1 ;
processLoop(function (i){
$("#mySelect").append(
''<option value="'' + obj.data[i].value + ''">''
+ obj.data[i].name
+ ''</option>''
);
}, obj.data.length);
}
Querrá asegurarse de tener un cierre u otro acceso a la variable obj dentro de la función de iteración.
Espero que esto ayude.
Debería volver a escribir la función para almacenar en caché la lista de elementos, luego recorrer la lista utilizando un contador de algún tipo.
Luego, cuando el contador llegue al contador% max_num_before_wait == 0, vuelva a llamar a timeout a la función.
Asegúrese de borrar el caché y el contador al final de la lista completa, o use una función secundaria con un parámetro de recuento adicional.
Si necesita algo más simple, escribí un complemento jQuery para facilitar la escritura de los bucles asíncronos: jQuery Async .
Usando el complemento, tu código puede reescribirse como:
function appendToSelect() {
$("#mySelect").children().remove() ;
$("#mySelect").html(
''<option selected value="'' + obj.data[0].value + ''">''
+ obj.data[0].name
+ ''</option>''
);
/////////////////////////////
var i = 1;
$.whileAsync({
test: function(){ i < obj.data.length; }
loop: function()
{
$("#mySelect").append(
''<option value="'' + obj.data[i].value + ''">''
+ obj.data[i].name
+ ''</option>''
);
i++;
}
});
/////////////////////////////
}
Debería ayudar a la capacidad de respuesta. Ajuste la opción ''bulk'' y ''delay'' para obtener más control.