JavaScript-Funktion innerhalb der Schleife

Kann mir jemand erklären, warum JSLint beschwert sich über die "Funktion innerhalb der Schleife" mit diesem Beispiel:

  for (var i = 0; i < buttons.length; i++) {
    (function(i) {
      buttons[i].onclick = function(e) {
        t.progressBars[t.current].update(buttons[i].getAttribute("data-value"));
      }
    })(i);
  }

Aber nicht ganz, wenn ich es zu ändern: 

function makeHandler(i)
  {
    return function() {
        t.progressBars[t.current].update(buttons[i].getAttribute("data-value"));
      }
  }

  for (var i = 0; i < buttons.length; i++) {

      buttons[i].onclick = makeHandler(i);

  }

Ich verstehe nicht ganz, wie es scheint, dass mit jeder loop-iteration neue Funktion-Objekt zurückgegeben werden, auch wenn es passiert, innerhalb von makeHandler() Funktion. Warum das zweite Beispiel ist ok, mit JS linters?

  • 2. Beispiel bindet ich mit dem callback. 1. man muss nicht. haben Sie alle Werte i gleich n im ersten Beispiel. wenn das zweite eine 0 bis n-1.
  • Wieder schauen. Der erste ist ein IFFE und macht das gleiche verbindliche.
  • Es ist nur ein unter-informiert Warnung von jsLint. Menschen geben Ihre Warnungen mehr credit als er verdient. Es kann Sie warnen, über Dinge, die Sie nicht tun sollten, aber alles, was es ber ist kein problem und auch nicht zwingend etwas geändert werden sollten.
  • Oh Gott. bin ich etwas fehlt? siehe diese Geige. nicht binden.
  • du bist die Alarmierung der Anzahl 1, nicht i. Dass nicht alles zeigen.
  • Äh, bist du aufrufen alert(1); versuchen Sie anrufen alert(i)
  • Sie haben einen Tippfehler in der fiddle alert(1) sollten wachsam sein, (ich) glaube ich
  • oh. ja. tut mir Leid. danke für die Hilfe 🙂
  • mein Fehler. 🙂 danke für die Hilfe.
  • Dank Bruder. hab es jetzt.

InformationsquelleAutor spirytus | 2014-10-02
  1. 4

    Deine beiden Beispiele sind nicht gleichwertig.

    In der ersten, erstellen Sie eine anonyme Funktion und ruft es auf jeder Schleife.

    Die innere Funktion (das click-Ereignis-handler) ist in Ordnung - du bist die Zuweisung einer neuen Funktion, aber es ist die anonyme äußere Funktion, die ineffizient ist in diesem Kontext. In Ihrem zweiten Beispiel ist die äußere Funktion ist umgestaltet aus der Schleife, wo ist es nur einmal angelegt, statt buttons.length Zeiten.

    InformationsquelleAutor Hamish
  2. 5

    Zitat aus linterrors,

    var elems = document.getElementsByClassName("myClass"), i;
for (i = 0; i < elems.length; i++) {
    (function (iCopy) {
        "use strict";
         elems[i].addEventListener("click", function () {
            this.innerHTML = iCopy;
         });
    }(i));
}

    Was wir jetzt haben, fängt der Wert i bei jeder iteration der Schleife. Dies geschieht, weil JavaScript übergibt Argumente an Funktionen per value. Dies bedeutet, dass iCopy innerhalb der Aufnahme-Funktion ist nicht mit ich in irgendeiner Weise (außer der Tatsache, dass Sie zufällig den gleichen Wert an diesem Punkt in der Zeit). Wenn i änderungen später (das tut es - auf der nächsten iteration der Schleife), dann iCopy ist nicht betroffen.

    Dies funktioniert, als wir es erwarten, aber jetzt ist das problem, dass der JavaScript-interpreter wird das erstellen einer Instanz der Aufnahme-Funktion pro loop iteration. Es hat damit zu tun, weil er nicht weiß, ob die Funktion Objekt verändert werden, die an anderer Stelle. Da Funktionen sind standard-JavaScript-Objekte können Sie Eigenschaften wie jedes andere Objekt, was könnte geändert werden in der Schleife. So durch die Schaffung der Funktion in der Schleife Kontext, führen Sie den interpreter zu erstellen, die Funktion mehrere Instanzen, die zu unerwartetem Verhalten führen können-und performance-Probleme. Um das Problem zu lösen, müssen wir verschieben die Funktion aus der Schleife:

    Würde ich gerne nutzen Array.prototype.forEach hier, wie diese

    buttons.forEach(function(curButton) {
    curButton.onclick = function(e) {
        t.progressBars[t.current].update(curButton.getAttribute("data-value"));
    };
});
    • Mit einer IIFE zu erstellen, die eine closure ist ein standard-problem der Lösung des Mechanismus in Schleifen. Ich sehe nicht ein problem überhaupt. Wenn Sie nicht brauchen einen Abschluss, der code kann verschoben werden, um eine extern definierte Funktion, so dass es ' s eine Funktion aufrufen, statt eine IIFE, aber das hat einige Nachteile (kein Zugang zum Eltern-scope-Variablen), zusätzliche Symbole erklärt, code nicht inline für die Lesbarkeit, etc...
    • Vereinbart. Ich wurde nur darauf hin, was jsLint denkt über code wie diesen 🙂
    InformationsquelleAutor thefourtheye
Schreibe einen Kommentar