La forma más rápida de recorrer miles de elementos de formulario en Javascript

Estoy tratando de recorrer varios miles de elementos de javascript. Específicamente casillas de verificación y selecciones. Las casillas de verificación deben alternarse entre marcar/desmarcar y las selecciones deben deshabilitarse/habilitarse dependiendo de si una casilla de verificación principal está marcada o no.

 <script>
 function processFormElem(min, max, isChecked) {
    for (var i=min; i < max; i++) {
        document.getElementById('chkbox_'+i).checked = isChecked;
        document.getElementById('select_'+i).disabled = !(isChecked);
    }
}
</script>

 Check this: <input onchange='processFormElem(0,10000,this.checked);' type='checkbox'  value = '0'><br/><br/>

 <?php
 for ($i=0; $i < 10000; $i++) {
     echo "Check: <input type='checkbox' id='chkbox_$i' value = '1'> ";
     echo "Select: <select disabled='disabled'  id='select_$i'><option selected>1<option>xyz</select><br/>";
 }
 ?>

Este código hace lo que se necesita, pero es extremadamente lento en el procesamiento de los elementos del formulario y puedo notar el retraso. ¿Hay alguna forma de hacerlo más rápido?

preguntado el 03 de enero de 13 a las 19:01

"Estoy tratando de recorrer varios miles de elementos javascript" - ¿Por qué? "es extremadamente lento" bueno, sí... "¿Hay alguna forma de hacerlo más rápido?" no recorra varios miles de elementos. -

¿Varios miles de elementos de forma? Eso me suena como un pequeño defecto de diseño. ¿Puede explicar por qué necesitaría varios miles de elementos de formulario en una página? -

wow 10 mil elementos en una pagina web? No hay forma de acelerar eso considerablemente con un bucle tan grande en el script del lado del cliente:

Tal vez podría dividir el bucle en otros más pequeños usando setTimeout/Interval. -

¿Se utiliza esta página como una técnica de interrogatorio mejorada? -

2 Respuestas

Si sus casillas de verificación y casillas de selección están inmediatamente una detrás de la otra, intente usar siguienteElementoSibling. El problema es que document.getElementById tiene que buscar a través de cada elemento en el árbol DOM para encontrar el que tiene el ID coincidente (aunque la implementación subyacente podría usar tablas hash o algo para mejorar el rendimiento de búsqueda de ID)

De cualquier manera, el uso de nextElementSibling le permite caminar a través de los elementos como lo haría a través de un árbol, ahorrándole tiempo de búsqueda.

Por ejemplo:

var cb = document.getElementById('chkbox_' + min),
    sb = document.getElementById('select_' + min);
while (cb !== null && sb !== null) {
    cb.checked = isChecked;
    sb.disabled = !isChecked;

    cb = cb.nextElementSibling;
    sb = sb.nextElementSibling;
}

EDIT:

Como David señala a continuación, no todos los navegadores son compatibles con nextElementSibling. Puedes modificar eso usando nextSibling.

En lugar de:

cb = cb.nextElementSibling;

Hacer:

while(cb !== null && cb.nodeName != 'Element') { cb = cb.nextSibling; }

Dicho esto, los navegadores que no son compatibles con nextElementSibling se están volviendo cada vez menos comunes, y la solución nextSibling viene con muchos gastos generales. Depende de usted (o potencialmente de su jefe) si desea admitir navegadores más antiguos.

Respondido el 03 de enero de 13 a las 19:01

@David: Excelente punto; editado con una solución alternativa compatible con versiones anteriores. - Sopa de Campanas

@Derek: parece estar usando javascript puro, no JQuery. Y prometo que la siguiente función es una envoltura delgada de las soluciones que propongo anteriormente, excepto que también tiene todos los gastos generales innecesarios de JQuery. - Sopa de Campanas

Creo que sería mejor usar Jquery aquí así:

$(':checkbox').each(function () {  
    this.checked = isChecked; 
});
//isChecked-true/false

Espero que funcione bien.

Respondido el 03 de enero de 13 a las 20:01

Esto va a ser más lento por varias razones: 1) sobrecarga estándar de JQuery; 2) el selector reunirá primero todos los elementos coincidentes en una matriz (muy lento); 3) sobrecarga de creación/cierre de funciones (agregar variables de la función principal al alcance de la función anónima); 4) sobrecarga de evaluación de función (tiene que llamar a la función, que es un paso en sí mismo) - Sopa de Campanas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.