JavaScript setTimeout không thể truy cập biến chức năng

Question

Ít nhất là những gì tôi nghĩ rằng nó sẽ xảy ra trong trường hợp này:

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

tôi nhận được lỗi này Uncaught TypeError: Cannot read property 'name' of undefined, vì vậy nó trông giống như bên trong hàm setTimeout listener biến people không phải là có thể truy cập. Tại sao và làm thế nào tôi có thể sửa chữa nó?

Answer 1

Thực tế, mọi người mảng là ok. Điều gì xảy ra là tôi thực sự là 2 và không có phần tử thứ ba trong mảng. Đó là lý do tại sao bạn nhận được lỗi này. Dưới đây là giải pháp:

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

đây là một jsfiddle http://jsfiddle.net/krasimir/XDfLu/2/

Câu trả lời dài: khi bạn sử dụng setTimeout bạn đang đi qua một chức năng để nó. Chức năng đó được gọi trong tương lai và những thứ bạn thực hiện ở đó cũng được thực hiện trong tương lai. Tại thời điểm đó (một trong tương lai) của bạn tôi không còn 0 hoặc 1. Nó thực sự là 2 vì vòng lặp của bạn đã kết thúc. Giải pháp được cung cấp sử dụng đóng cửa bổ sung để tạo thêm một phạm vi/ngữ cảnh. Và một khi hàm được truyền tới setTimeout được gọi là nó sẽ tìm một biến i. Không có một điều như vậy trong phạm vi của nó, vì vậy nó đi một cấp lên. Và có giá trị thực tế mà chúng ta cần.