Question

我有以下jQuery代码，用于隐藏/显示选项中的选项，如果它们具有active = F或active = T自定义属性。它工作得很好，但是当select包含很多选项时，有时需要10秒或更长时间才能完成并导致页面锁定。任何人都可以指出如何优化这段代码吗？

        $(document).ready(function() {
        $.fn.toggleOption = function( show ) {
            return this.each(function(){
                $(this).toggle(show);
                if(show){
                    if($(this).parent('span.toggleOption').length) $(this).unwrap();
                    $('#unitsSelector').val(""); 
                } else {
                    $(this).wrap('<span class="toggleOption" style="display: none;" />');
                    $('#unitsSelector').val("");
                }
            });
        };
        var list = $('#unitsSelector option'), buttons = $('.unitToggle');
        list.toggleOption(false);
        buttons.on('click', function () {
            var filter = $(this).hasClass('active') ? "[active=F]" : "[active=T]";
            list.toggleOption(true).filter(filter).toggleOption(false);
        });
        $('.active').click();
    });

谢谢!!!

更新

这里提供小提琴

http://jsfiddle.net/L94Bz/

当你从活动/非活动状态切换时，你需要花费很长时间才能完成。

Answer 1

首先需要在变量中缓存这些$(...)次调用。

$(document).ready(function () {

    var list = $('#unitsSelector option'),
        unitsSelector = $('#unitsSelector');

    $.fn.toggleOption = function (show) {
        return this.each(function () {
            var $this = $(this);

            $this.toggle(show);

            if (show && $this.parent('span.toggleOption').length) {
                $this.unwrap();
            } else {
                $this.wrap('<span class="toggleOption" style="display: none;" />');
            }

            unitsSelector.val("");
        });
    };

    list.toggleOption(false);

    $('.unitToggle').on('click', function () {
        var filter = $(this).hasClass('active') ? "[active=F]" : "[active=T]";
        list.toggleOption(true).filter(filter).toggleOption(false);
    });

    $('.active').click();

});

您还应该通过event delegation使用jQuery。

如果我知道你的HTML，或者有一个工作小提琴的例子，我可以帮助你更多。

Answer 2

一个快速解决方法：在整个循环中退出重新运行jQuery构造函数。每次你说$(#unitsSelector)之类的东西时，工作都会在幕后进行。

$.fn.toggleOption = function( show ) {
  var $units = $('#unitsSelector'); 

  return this.each(function(){
    var $this = $(this);
    $this.toggle(show);
    if(show){
      if($this.parent('span.toggleOption').length) $this.unwrap();
      $units.val(""); 
    } else {
      $this.wrap('<span class="toggleOption" style="display: none;" />');
      $units.val("");
    }
  });
};

调试SLOW jQuery代码

2 个答案: