jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery绑定效率大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用多个jQuery绑定数千个元素和输入,我遇到负载速度问题,是否有更有效的方法

该网站能够通过ajax调用在产品列表之间切换,页面无法刷新。有些列表有10个项目,大约100个,超过2000个。当我开始在列表之间翻转时出现速度问题;每次2000个项目列表加载系统拖动约10秒钟。

在重建列表之前,我将目标元素的HTML设置为“’,并解除绑定下面的两个绑定。我确定它与我在回调中所做的所有的父,下一个和子调用有关。任何帮助深表感谢。

循环2500次

<ul>
  <li><input type="text" class="product-code" /></li>
  <li>PROD-CODE</li>
  ...
  <li>PRICE</li>
</ul>

结束循环

$('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'),prevIoUsValue
    );
});

解决方法

你绑定一个处理程序2500次,而不是使你的函数使用这样的直接或委派:
$('li.product-code').live('click',function(event){ 
$('input.product-qty').live('keyup',function(){

.live()在DOM级别监听点击以起泡,然后使用点击源的上下文执行事件。这意味着您有一个事件处理程序,而不是2500个事件处理程序,这意味着它在浏览器上更快更容易

如果您有一个容器来包装未被替换的替换内容(保留在所有AJAX调用中),则可以使其更加本地化:

$('#container').delegate('li.product-code','click',function(event){ 
$('#container').delegate('input.product-qty','keyup',function(){

这样做的结果是事件在被抓住之前发生次数较少。

一个痛点可能是创建元素,你可以发布该代码吗?经常容易的优化在那里产生很大的性能提升。

更新

大佬总结

以上是大佬教程为你收集整理的jQuery绑定效率全部内容,希望文章能够帮你解决jQuery绑定效率所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。