1.- 왜 updateFn에서 함수를 반환해야합니까? 반환 함수를 주석 처리하는이 코드를 실행하면 진행률 표시 줄이 100 %로 바로 이동합니다.
2.- 함수를 반환 할 때 필요한 논리를 updateFn 내에 포함하는 것과 비교하여 함수를 반환 할 때의 차이점은 무엇입니까?
Ext.onReady(function(){
Ext.MessageBox.show({
title : 'Wait',
msg : 'Hold',
progressText: "on going ...",
width : 300,
progress : true,
closable : false
});
var updateFn = function(num){
console.log('inside updateFn');
return function(){ //if I comment this line the function gets immediately called (when executed from the for loop)
console.log(num);
if(num == 6){
Ext.MessageBox.updateProgress(100, 'All items saved puto');
Ext.Function.defer(Ext.MessageBox.hide, 1500, Ext.MessageBox);
}
else{
var i = num / 6;
var pct = Math.round(100 * i);
Ext.MessageBox.updateProgress(i, pct + '% completed');
}
}
};
for(var i = 1; i < 7; i++){
console.log('inside for');
setTimeout(updateFn(i),i * 2000);
}
});
: setTimout첫 번째 매개 변수로 함수에 대한 유효한 참조가 필요합니다. 에서 함수를 반환 updateFn하지 않으면 매개 변수를에 전달하지 않습니다 setTimout.
: 함수에서 함수를 반환 하여 클로저 를 만들 수 있습니다 . 클로저와 그것이 좋은 점을 이해하려면 다음을 읽어 보시기 바랍니다. JavaScript 클로저는 어떻게 작동합니까?
여기서 클로저를 반환해야하는 이유 : 숫자 (변수 i)를 updateFn-함수에 전달합니다. 그런 다음 반환 된 함수에서이 숫자를 사용합니다. 그렇게하지 않으면 해당 변수를 사용할 수 없습니다.
당신은 아마도 다음과 같이하지 않는 이유를 스스로에게 묻고있을 것입니다.
for(var i = 1; i < 7; i++){
setTimeout(function() {
updateFn(i); // i is always the same variable (reference)
}, i * 2000);
}
그러나 이것은 변수 i가 '보존'되지 않았기 때문에 작동하지 않습니다 . 그런 다음 다음과 같이해야합니다.
for(var i = 1; i < 7; i++){
setTimeout((function(i) { // f.e. make use of a self-execution function
return function() {
updateFn(i); // i is now the variable of the inner scope and thus preserved
};
})(i), i * 2000);
}
이것이 바로 여러분이 이미하고있는 일입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다