Чекбокс 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 очень оптимизирован для обработки вызовов $("<selector>"), попробуйте использовать «локальные» селекторы, такие как $(<some element>).find("<child selector>") в функции levels() - если это имеет смысл в данном конкретном контексте вашего приложения.
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;