Question

我在复选框上执行了一些jQuery事件。它很慢。在Safari上花了一秒左右的时间，在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

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

product_analysis_global()可能正在处理$.each()个循环中的大量元素。我的猜测是，仅这一点就是造成大部分感知缓慢的原因。也许您的页面本身非常复杂和/或大，导致有大量时间来查找“已选中”或“未选中”的单个元素。
您正在制作大量“全局”jQuery选项。虽然jQuery非常适合处理$("<selector>")调用，但尝试在$(<some element>).find("<child selector>")函数中使用levels()之类的“本地”选择器 - 如果这在您的应用的特定上下文中有意义的话。
通过第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;

复选框OnClick乌龟不是野兔

1 个答案: