javascript - 调试 SLOW jQuery 代码

Question

我有以下 jQuery 代码，用于根据它们是否具有 active=F 或 active=T 自定义属性来隐藏/显示选择中的选项。It works great, however when the select contains a lot of options, it takes 10 seconds or more sometimes to finish and causes the page to lock up. 有人能指点我如何优化这段代码吗？

        $(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();

});

---

您还应该通过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("");
    }
  });
};