여기에 콘솔의 값을 기록하려고합니다. 주어진 코드의다른 .then 함수 안에있는 .then 함수 내부의 변수에 어떻게 액세스 할 수 있습니까?
driver.sleep(2000).then(function logAInConsole() {
var a = ["Quas","Wex","Exort","Invoke"];
for(var i = 0; i < a.length; i++) {
driver.sleep(1000).then(function loggingA() {
driver.sleep(1000).then(function() {
console.log(a[i]);
})
});
}
});
결과는 다음과 같습니다
정의되지 않은
정의되지 않은
정의되지 않은
정의되지 않은
- 대신 사용 "대해 forEach"("드라이버"개체 실제 약속 행동을 시뮬레이션하기 위해 생성됨)
var driver = {}
driver.sleep = function() {
return new Promise((resolve)=>{
resolve()
})
}
driver.sleep(2000).then(function(){
var a = ["Quas","Wex","Exort","Invoke"];
a.forEach((b)=>{
driver.sleep(1000).then(function loggingA(){
driver.sleep(1000).then(function(){
console.log(b);})
});
})
});기능에 액세스 할 수 있습니다. a[i]에 액세스 할 때 오류가 아니라 "정의되지 않음"이 생성되는 이유입니다.
코드의 버그는 변수 i에 액세스 할 때 이미 4으로 증가되었습니다. 결과적으로 [4]는 정의되지 않습니다.
driver.sleep은 약속이므로 i이 길이가 a 이상으로 증가한 후에 실행됩니다. 약속이 실행될 때까지 i은 4이며 이는 a의 유효한 색인이 아닙니다.
1 : 당신은 두 가지 (뿐만 아니라 드라이버 모의 추가) 중 하나를 수행하여이 문제를 얻을 수 있습니다
var driver = {
sleep: function(time) {
return new Promise(function(resolve, reject) {
setTimeout(resolve, time);
});
}
}
driver.sleep(2000).then(function logAInConsole() {
var a = ["Quas","Wex","Exort","Invoke"];
for(var i = 0; i < a.length; i++) {
driver.sleep(1000).then(function loggingA(i) {
driver.sleep(1000).then(function() {
console.log(a[i]);
})
}.bind(this, i));
}
});for 루프의 안쪽 바깥 쪽 함수에
i 바인딩
2 : forEach :
var driver = {
sleep: function(time) {
return new Promise(function(resolve, reject) {
setTimeout(resolve, time);
});
}
}
driver.sleep(2000).then(function logAInConsole() {
var a = ["Quas","Wex","Exort","Invoke"];
a.forEach(function(value) {
driver.sleep(1000).then(function loggingA(i) {
driver.sleep(1000).then(function() {
console.log(value);
})
});
});
});a 아무것도 변경할 필요가 없습니다 경우 일반적으로 더 명확 성능의 작은 약간의 비용으로 for 루프보다 더이기 때문에 일반적으로
은, 그것은, forEach를 사용하는 것이 더 의미가 있습니다. 어떠한 이유로 든 a과 i이 절대적으로 필요하거나 루핑이 게으르려면, 약속 함수에서 사용할 수있는 유일한 방법은 가장 바깥 쪽 함수에 바인딩하여 값을 유지하는 것입니다.