JavaScript SetTimeout kann nicht Funktion Variable zugreifen

Question

Mindestens ist das, was ich denke, es passiert in diesem Fall:

function MyFunc() { 
    var people = Array({name: 'Alex', age: 25}, {name: 'Ellen', age: 43}); 
    for (var i=0; i<people.length; i++) { 
     setTimeout(function() { ShowIt(people[i].name) }, 1000); // !!! 
    } 
} 

function ShowIt(name) { 
    alert(name); 
} 

ich diesen Fehler Uncaught TypeError: Cannot read property 'name' of undefined bekommen, so sieht es aus wie in der setTimeout Listener-Funktion die people Variable nicht ist zugänglich. Warum und wie kann ich es reparieren?

Answer 1

Eigentlich Menschen Array ist in Ordnung. Was passiert, ist, dass Ihr i tatsächlich 2 ist und es kein drittes Element im Array gibt. Deshalb erhalten Sie diesen Fehler. Hier ist die Lösung:

function MyFunc() { 
    var people = Array({name: 'Alex', age: 25}, {name: 'Ellen', age: 43}); 
    for (var i=0; i<people.length; i++) { 
     (function(i) { 
      setTimeout(function() {    
       ShowIt(people[i].name) 
      }, 1000); 
     })(i); 
    } 
} 

function ShowIt(name) { 
    console.log(name); 
} 

MyFunc(); 

Hier ist ein jsfiddle http://jsfiddle.net/krasimir/XDfLu/2/

Die lange Antwort: Wenn Sie verwenden setTimeout Sie eine Funktion es sind vorbei. Diese Funktion wird in der Zukunft genannt und die Dinge, die Sie dort machen, werden auch in Zukunft ausgeführt. In diesem Moment (der Zukunft) ist dein i nicht mehr 0 oder 1. Es ist eigentlich 2, weil deine Schleife endete. Die bereitgestellte Lösung verwendet einen zusätzlichen Abschluss, um einen weiteren Bereich/Kontext zu erstellen. Und sobald die an setTimeout übergebene Funktion aufgerufen wird, sucht sie nach einer i-Variablen. Es gibt so etwas in seinem Umfang nicht, also geht es eine Stufe höher. Und da ist der tatsächliche Wert, den wir brauchen.