javascript - 了解ExtJs进度栏中的setTimeout示例

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。
：您可以通过返回一个函数（从一个函数）来创建一个闭包。要了解闭包及其优点，我建议您阅读以下内容：How do JavaScript closures work?


为什么需要在此处返回闭包：您将数字（变量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);
}

而这正是您已经在做的。

关于javascript - 了解ExtJs进度栏中的setTimeout示例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23857021/