Javascript变量范围，存储内容以在回调中使用它

Question

我对变量的范围有疑问。我调用一个 Web 服务（异步）并且在回调中我想使用这个变量。问题是变量同时发生了变化，所以我想存储它的内容，但它没有按我的意愿工作。

var requiredFiles = ['config.json','resa.json', 'customers.json'];

retrieveAndStoreFiles(requiredFiles);


...

function retrieveAndStoreFiles(requiredFiles){

    for (var i= 0; i < requiredFiles.length; i++) {

         //I want to store the content of requiredFile in order to use it below
         retrieveFileOnServer(requiredFiles[i], function(response){

            if (response.items.length == 0 ) {

           //I have tried several things but requiredFile is always equal to 'customers.json'
           console.log(requiredFiles[i]);
           createNewFile(requiredFile[i], function(response){   

        });
    }
 }

如您所见，我有一个包含 3 个文件名的数组。我尝试在服务器上检索它们，如果它们不存在，它们就会被创建。 var requiredFile 被修改，因为它是异步的。我想在函数“retrieveAndStoreFiles”中保留自己的值

提前谢谢

编辑：根据 Romain 的回答更新代码

EDIT2

for (var i = 0; i < requiredFiles.length; i++) {

        retrieveFile(requiredFiles[i], (function (index) { 

            console.log(index); //works
            var index = index; // index is still not accessible with that
            return function (response) { // function(response, index) is not possible, i must have only one parameter
            console.log(index); // index is not defined
            if (response.items.length == 0) {
                console.log(response);
                createNewFile(requiredFiles[index], function (response) {

                });
            }

        }

    })(i));
}

我尝试结合您的解决方案，但它仍然不起作用，有人可以告诉我我缺少什么吗？ （对不起，我是 javascript 新手）

EDIT3

function retrieveFile(fileName, callback) {

var request = gapi.client.request({
    'path': '/drive/v2/files',
    'method': 'GET',
    'params': {
        q : "title='"+fileName+"'"
    }           
}); 

request.execute(function(resp) {
    callback(resp);
});
}

当我尝试时：

for(var i = 0; i < requiredFiles.length; i++) {
     window.setTimeout(
        ( function(arg1) {

            return function() {

               console.log(requiredFiles[arg1]);
            };
        } ) ( i ),
    1000
    );
}

它可以工作，但这段代码不起作用：

for(var i = 0; i < requiredFiles.length; i++) {
    retrieveFile(requiredFiles[i],
        ( function(arg1) {

            return function(reponse) {

               console.log(requiredFiles[arg1]); //arg1 is undefined
            };
        } ) ( i )
    );
}

Answer 1

function retrieveAndStoreFiles(requiredFiles) {

    for (var i = 0; i < requiredFiles.length; i++) {

        (function (index) {
            //I want to store the content of requiredFile in order to use it below
            retrieveFileOnServer(requiredFiles[index], function (response) {

                if (response.items.length == 0) {

                    console.log(requiredFiles[index]);
                    createNewFile(requiredFile[index], function (response) {

                    });
                }

            });

        })(i);
    }
}

Answer 2

retrieveFileOnServer(requiredFile, (function(requiredFile) {return function(response){
    if (response.items.length == 0 ) {

        //I have tried several things but requiredFile is always equal to 'customers.json'
        console.log(requiredFile);
        createNewFile(requiredFile, function(response){ 
            //...
        });
    }
}})(requiredFile));

问题是requiredFile 只存在一次，在retrieveAndStoreFiles 的范围内。因此将始终采用最后看到的值。如果我有正确的左括号和右括号的数量以及正确的内容，则应该在函数function(response) 的作用域链中创建一个新条目，其中将变量requiredFile 设置为正确的值。

有关黑暗魔法的更多信息，请参阅https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures。

Answer 3

您不应循环调用retrieveAndStoreFiles 函数。

你应该让函数调用自己，增加“i”。

这样你就可以确定在下一个元素上运行函数之前请求已经完成。