Question

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




});

Answer 1

：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未被保留＆＃39;。然后你必须这样做：

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

这正是你正在做的事情。

理解ExtJs进度条中的setTimeout示例

1 个答案: