JS Mutable Variable có thể truy cập từ việc đóng

Question

vì vậy tôi đã có một cảnh báo trong trình biên dịch JS của tôi nhưng bạn có thể giải thích cho tôi nếu điều này thực sự sẽ ảnh hưởng đến cách mã của tôi sẽ thực thi?

for (x = 0; x < levels.length; x++) { 
    var level = levels[x]; 
    var candlesOnLevel = $.grep(relevantCandles, function(candles, index) { 
     return parseInt($(candles).css("top").replace(/px/, "")) === level; 
    }); 
} 

Answer 1

Nó cảnh báo bạn rằng level thể được sửa đổi trước đó grep "gọi lại" được với nó - tất nhiên, IDE không biết rằng $.grep không mất một callback, nhưng một chức năng lọc. (Lưu ý rằng chức năng async tham gia một callback thường có chữ ký giống nhau)

Nếu nó là một chức năng gọi lại không đồng bộ, sau đó khi đọc giá trị của level, nó sẽ tìm ra giá trị đặt trước đó - trong phiên cuối cùng của vòng lặp không phải là giá trị hiện tại khi bạn gửi cuộc gọi, điều này sẽ gây ra sự cố - do đó, cảnh báo (nhớ bạn thường rất hữu ích).

Answer 2

Tại sao các bạn nhận được cảnh báo

Như @RGraham nêu trong ý kiến, trình biên dịch js là giả định rằng tham số thứ hai để $.grep() là một chức năng gọi lại và đang được thực hiện không đồng bộ (ít nhất đây là những gì nó trông giống như cú pháp). Tuy nhiên, điều đó không đúng vì hàm thứ hai thực tế là chức năng lọc . Xem API docs

Một thường nhận được cảnh báo Mutable Variable is accessible from closure khi sử dụng hàm async bên trong vòng lặp for. Thats bởi vì toàn bộ for loop có một phạm vi. Điều đó có nghĩa là trên mỗi lần lặp lại, bạn sẽ kết thúc việc ghi lại cùng một biến. Vì vậy, các cuộc gọi lại sẽ nhận được các id sai, bởi vì level (có thể thay đổi) sẽ được thay đổi trước khi gọi lại được gọi. May mắn thay, không thats trường hợp bạn đang đối phó với (vì $ .grep không phải là async) :)

... bạn có thể giải thích cho tôi nếu điều này thực sự sẽ ảnh hưởng đến cách mã của tôi sẽ thực hiện?

Không, cảnh báo đó sẽ không ảnh hưởng đến kết quả mã của bạn.

Bạn chỉ cần bỏ qua cảnh báo nhưng nếu bạn vẫn muốn tránh điều này, bạn có thể đặt nội dung bên trong một đóng.

for (x = 0; x < levels.length; x++) { 
    (function(){ 
     var level = levels[x]; 
     var candlesOnLevel = $.grep(relevantCandles, function(candles, index) { 
      return parseInt($(candles).css("top").replace(/px/, "")) === level; 
     }); 
    })(); 
}