复选框 OnClick 是乌龟而不是兔子

Question

我在复选框上执行了一些 jQuery onclick 事件。它很慢。在 Firefox 上需要一秒左右，在 Safari 上需要半秒。

如果它不能保持页面位置，我也不会介意。有谁知道如何阻止它在执行 JS 时阻止页面向上或向下滚动。

有什么想法吗？

奇妙的

EG。

onclick="levels();"

function levels() {

  var rqleveld = $(this).attr('src'); 
  var rqleveldA = Number($(this).attr('src'))+1; 
  var rqleveldB = Number($(this).attr('src'))+2; 
  if (!this.checked) { 
    $('input:checkbox[title=RQlevel' + rqleveld + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveld + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveld + ']').css('display','block');
    $('input:checkbox[title=RQlevel' + rqleveldA + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveldA + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveldA + ']').css('display','block');
    $('input:checkbox[title=RQlevel' + rqleveldB + ']').removeAttr('checked');
    $('input:checkbox[title=RQlevel' + rqleveldB + ']').attr('disabled','disabled');
    $('span[title=RQlevel' + rqleveldB + ']').css('display','block');
  }
  else if (this.checked) { 
    $('input:checkbox[title=RQlevel' + rqleveld + ']').removeAttr('disabled','disabled');
    $('span[title=RQlevel' + rqleveld + ']').css('display','none');
  }
product_analysis_global();
};

$(function() {

    $('input:checkbox').bind('change', levels);
});

function product_analysis_global() {
    $(':checked').each(function(){
        $('#product_' + this.alt).css('display','block');
        $('#product_quantity_PRI_' + this.alt).val(this.value);
        var quantity = $('#product_quantity_PRI_' + this.alt).val();
        var price = $('#product_price_PRI_' + this.alt).val();
        var duration = $('#product_duration_PRI_' + this.alt).val();
        var dives = $('#product_dives_PRI_' + this.alt).val();
        var hire = $('#product_hire_PRI_' + this.alt).val();

});
    $(':not(:checked)').each(function(){
        $('#product_' + this.alt).css('display','none');
        $('#product_quantity_PRI_' + this.alt).val('0');
        var quantity = $('#product_quantity_PRI_' + this.alt).val();
        var price = $('#product_price_PRI_' + this.alt).val();
        var duration = $('#product_duration_PRI_' + this.alt).val();
        var dives = $('#product_dives_PRI_' + this.alt).val();
        var hire = $('#product_hire_PRI_' + this.alt).val();

});
}

Answer 1

重构此代码时需要考虑的一些事项：

1. product_analysis_global() 可能在任一（或两个）$.each() 循环中处理大量元素。我的猜测是，这本身就是造成大部分感知缓慢的原因。也许您的页面本身非常复杂和/或很大，导致需要花费大量时间来查找“选中”或“未选中”的各个元素。
2. 您正在做很多很多“全局”jQuery 选择。虽然 jQuery 对于处理 $("") 调用进行了非常优化，但请尝试使用“本地”选择器，例如 $().find("< levels() 函数中的;child选择器>") - 如果这在您的应用的特定上下文中有意义。
3. 按照与第 2 项相同的逻辑，如果选择器是常量，您可以尝试存储 $("") 调用的值。例如，

    var rqleveld = $(this).attr('src'); 
    var rqleveldA = Number($(this).attr('src'))+1; 
    var rqleveldB = Number($(this).attr('src'))+2;

您可以选择

var $this = $(this);
var rqleveld = $this.attr('src'); 
var rqleveldA = Number($this.attr('src'))+1; 
var rqleveldB = Number($this.attr('src'))+2;