哪个jQuery代码更有效率？

Question

好奇问一下，以下哪段代码更有效（如果都不是，最好的方法是什么？）

背景 - 构建一个小型图像轮播，并且涉及到控件（上一个、暂停/播放、下一个）的代码。

<ul class="controls"> 
    <li> <a href="#" class="prev">  Previous Image </a> </li>
    <li> <a href="#" class="pause"> Pause          </a> </li>
    <li> <a href="#" class="next">  Next Image     </a> </li>
</ul>

// inside document.ready()
$(".controls a").click(function() {
    var cur_class = $(this).attr("class");

    if (cur_class == "pause") {
        // do something
    } else if (cur_class == "prev") {
        // do something
    } else if (cur_class == "next") {
        // do something
    }
)};

// OR THIS
$(".controls a.prev").click(function() { /* do something */ });
$(".controls a.pause").click(function() { /* do something */ });
$(".controls a.next").click(function() { /* do something */ });

感谢 M。

- Matt

---

类在加载时是否总是相同？如果不是，您将需要考虑使用live()处理程序。 - Dave Archer

不确定是否回答了这个具体问题，但是O'Reilly的jQuery Cookbook提供了一些关于不同方法性能方面的重要见解。 - STW

高效率指的是什么？执行速度？初始化速度？内存开销？ - user113716

Answer 1

最好的选择是使用.delegate()。这是jQuery 1.4.2中新增加的事件，比仅仅使用click要好得多。

.click()为每个锚点标签添加一个新事件。

.delegate()会在点击（或任何指定的事件）之前等待，然后再添加一个新的事件（仅适用于特定被点击的元素）。

$(".controls").delegate("a", "click", function() {

    var cur_class = $(this).attr("class");

    if (cur_class == "pause") {
        // do something
    } else if (cur_class == "prev") {
        // do something
    } else if (cur_class == "next") {
        // do something
    }

}

请注意：代码尚未测试，请阅读jQuery文档中的.delegate()信息以获取更多信息。

也许您需要为<ul>添加一个id： <ul class="controls" id="ul_id">，然后使用$("#ul_id").delegate("a", "click", function() { / ... }。

希望对您有所帮助。

- Jonathan

Answer 2

几乎没有区别。由于您正在构建一个 轮播，最大的瓶颈将是加载的图像。

- user347594

---

我明白这一点，但一直很好奇使用jQuery的哪种技术更有效率。我没有任何瓶颈或负载问题之类的，只是关于效率的问题，特别是对于未来的jQuery使用。 - Matt

人们什么时候才能明白，“最有效率”这个词是没有意义的。最有效率的是什么，空间、时间、甜甜圈还是猴子？这是JavaScript，如果你指的是“高效”就是最快的话，那就自己动手做，对自己进行分析，不要依赖那些“认为”某些东西是一种或另一种方式的人，或者发布未经测试的代码。然后你必须在所有浏览器中测试所有的JavaScript解释器，以找出你“认为”你发现的内容是否适用于所有环境。 - user177800

@fuzzy lollipop，放松点，兄弟。有时候人们会咨询别人，因为你知道，其他人可能有智慧可传授。向他人学习并不等于懒惰。 - Mark

不在已经编写好的两个代码块周围放置一些计时语句 == 懒惰。这是最糟糕的过早微观优化！ - user177800

Answer 3

我认为以下是最快的方法。它只会获取一次DOM节点列表，并进行过滤，而不是获取三次。

$('.controls a')
.filter('.prev')
.click(function(){/*...*/})
.end()
.filter('.pause')
.click(function(){/*...*/})
.end()
.filter('.next')
.click(function(){/*...*/});

- Jacob Relkin

---

这是否真的比只执行 $(".controls a.prev") 更快？ - Matt

我认为是这样的。它只获取一次DOM节点列表并进行过滤，而不是获取三次。 - Jacob Relkin

我认为 .delegate() 是为了解决这个具体问题而设计的，所以它可能比 .filter() 更高效。 - Jonathan