Tengo problemas con la velocidad de carga al utilizar múltiples jQuery binds en un par de miles de elementos y entradas, ¿hay alguna forma más eficiente de hacerlo?jQuery bind efficiency
El sitio tiene la capacidad de alternar entre las listas de productos a través de llamadas ajax, la página no se puede actualizar. Algunas listas tienen 10 elementos, unos 100, algunos más de 2000. El problema de la velocidad surge cuando comienzo a pasar de una lista a otra; cada vez que se carga la lista de más de 2000 elementos, el sistema se arrastra durante aproximadamente 10 segundos.
Antes de reconstruir la lista estoy configurando el html del elemento de destino como '' y desvinculando los dos enlaces a continuación. Estoy seguro de que tiene algo que ver con todas las llamadas principales, siguientes y secundarias que estoy haciendo en las devoluciones de llamada. Cualquier ayuda es muy apreciada.
bucle 2500 veces
<ul>
<li><input type="text" class="product-code" /></li>
<li>PROD-CODE</li>
...
<li>PRICE</li>
</ul>
bucle final
$('li.product-code').bind('click', function(event){
selector = '#p-'+ $(this).prev('li').children('input').attr('lm');
$(selector).val(
($(selector).val() == '' ? 1 : (parseFloat($(selector).val()) + 1))
);
Remote.Cart.lastProduct = selector;
Remote.Cart.Products.Push(
Remote.Cart.customerKey,
{
code : $(this).prev('li').children('input').attr('code'),
title : $(this).next('li').html(),
quantity : $('#p-'+ $(this).prev('li').children('input').attr('lm')).val(),
price : $(this).prev('li').children('input').attr('price'),
weight : $(this).prev('li').children('input').attr('weight'),
taxable : $(this).prev('li').children('input').attr('taxable'),
productId : $(this).prev('li').children('input').attr('productId'),
links : $(this).prev('li').children('input').attr('productLinks')
},
'#p-'+ $(this).prev('li').children('input').attr('lm'),
false,
(parseFloat($(selector).val()) - 1)
);
return false;
});
$('input.product-qty').bind('keyup', function(){
Remote.Cart.lastProduct = '#p-'+ $(this).attr('lm');
Remote.Cart.Products.Push(
Remote.Cart.customerKey,
{
code : $(this).attr('code') ,
title : $(this).parent().next('li').next('li').html(),
quantity : $(this).val(),
price : $(this).attr('price'),
weight : $(this).attr('weight'),
taxable : $(this).attr('taxable'),
productId : $(this).attr('productId'),
links : $(this).attr('productLinks')
},
'#p-'+ $(this).attr('lm'),
false,
previousValue
);
});
¡Vivo es el ganador! Ahora mi única interrupción de velocidad es un complemento sin clic derecho que descargué. Sin los enlaces, la creación de la lista fue instantánea, ahora es aproximadamente medio segundo. Con el script sin clic derecho se cuelga, pero eso se debe a las vinculaciones que imagino. ¡Muchas gracias! – clownshoes
@chelfers - ¿Qué complemento sin clic derecho estás usando? Esto también debería ser bastante fácil de cambiar a '.live()' y obtener todo tu código al instante ... si no lo has hecho ya respondes aquí y voy a echar un vistazo. –
'delegate()' es definitivamente el camino a seguir. Es mucho más óptimo que las alternativas cuando tienes miles de elementos de los eventos que deseas capturar. La única advertencia es que requiere jQuery 1.4. –