Welcher jQuery-Code ist effizienter?

Question

Nur aus Neugier, welcher der folgenden Codes ist effizienter (wenn keiner von beiden, was wäre der beste Weg?)

Hintergrund - Ich baue ein kleines Bildkarussell und der fragliche Code hat mit den Steuerelementen zu tun (prev, pause/play, next)

<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 */ });

Danke M.

Answer 1

Die beste Option ist die Verwendung von .delegate() . Es ist ein neues Ereignis zu jQuery 1.4.2 hinzugefügt und seine viel besser als nur mit Klick.

.click() fügt ein neues Ereignis für jeden Anker-Tag hinzu.

.delegate() wartet auf einen Klick (oder ein anderes angegebenes Ereignis), bevor ein neues Ereignis (nur für das angeklickte Element) hinzugefügt wird.

$(".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
    }

}

Hinweis: Der Code ist nicht getestet, lesen Sie die .delegate() info in der jQuery-Dokumentation für weitere Informationen.

Vielleicht müssen Sie eine ID zur <ul> :

( <ul class="controls" id="ul_id"> ) und verwenden Sie dann $("#ul_id").delegate("a", "click", function() { / ... } .

Ich hoffe, das hilft.

Answer 2

Fast kein Unterschied. Da Ihr Gebäude ein Karussell der große Engpass werden die Bilder sein, die Sie laden.

Answer 3

Ich denke, dass die folgende Vorgehensweise die schnellste ist. Es holt eine DOM-Nodeliste nur einmal und filtert sie, anstatt sie dreimal zu holen

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