Javascript 通过回调更新全局变量

我有以下功能

   var urls = '';
    handleFiles(f,function(url){
        urls = urls + url + ',';
        console.log("urls is " + urls);
    });

我在上传和更新我的url后获得url。但是我的url永远不会更新，它显示最后上传的文件的url

更新1 这是我现在的完整代码

var urls = '';
document.getElementById('question-file-selector').addEventListener('change',handleFileSelect,false);
    function handleFileSelect(evt){
        var files = evt.target.files; //File list object
            // Loop through file list, render image files as thumbnails
        for (var i = 0,f;f = files[i];i++){


        handleFiles(f,function(url){
                urls = urls + url + ',';
                console.log("urls is " + urls);
                });
        // Only process image files
        if (!f.type.match('image.*')){
            $('#list').append('<img class="file-thumb" src="/static/download168.png"/>');
            continue;
        }
        var reader = new FileReader();

        //Closure to capture file information
        reader.onload = (function(theFile){
                return function(e){
                    //Render thumbnail
                    $('#list').append('<img class="thumb" src="'+e.target.result+'" title="'+escape(theFile.name)+'"/>'); 
                    };
                    })(f);
        reader.readAsDataURL(f);
    }
    }

console.log("Url is",urls);`   

---

协调多个异步操作是最好使用promises之类的工具来解决的工作。所以，从长远来看，我建议你仔细阅读承诺以及如何使用承诺

在没有承诺的情况下，这里有一种蛮力的方式，你可以告诉你所有的

handleFiles（）

操作是通过使用计数器知道上次异步操作何时完成，然后使用上次回调中的

URL

变量或从那里调用函数并将

URL

变量传递给该函数来完成的：

document.getElementById('question-file-selector').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
    var files = evt.target.files; //File list object
    var urls = "";
    // Loop through file list, render image files as thumbnails
    var doneCnt = 0;
    for (var i = 0, f; f = files[i]; i++) {
        handleFiles(f, function (url) {
            urls = urls + url + ',';
            console.log("urls is " + urls);
            ++doneCnt;
            if (doneCnt === files.length) {
                // The last handleFiles async operation is now done
                // final value is in urls variable here
                // you can use it here and ONLY here

                // Note: this code here will get executed LONG after the
                // handleFileSelect() function has already finished executing
            }
        });
        // Only process image files
        if (!f.type.match('image.*')) {
            $('#list').append('<img class="file-thumb" src="/static/download168.png"/>');
            continue;
        }
        var reader = new FileReader();
        //Closure to capture file information
        reader.onload = (function (theFile) {
            return function (e) {
                //Render thumbnail
                $('#list').append('<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/>');
            };
        })(f);
        reader.readAsDataURL(f);
    }
}

// You can't use the urls variable here.  It won't be set yet.

---

由于我无法运行此代码来测试它，这里可能有一两个错误，但是您应该能够调试这些错误，或者告诉我们错误发生的位置，我们可以帮助您调试它。这些是从概念上解决协调多个异步操作的问题的方法。

use:var url=''；为什么不做

var-url=[]；推送（url）url.join（'，'）。关于您当前的方法，如果我们看到包装此代码的代码，我们可能会有一个想法。可能是某个变量覆盖问题。看起来
handleFiles
是一种ajax方法，它使用url参数进行回调。您可能必须在外部作用域中声明
var URL
。@SonuSindhu这是一个很好的建议，但没有解释为什么这不起作用@哦，我真的不知道
handleFiles
应该做什么，但是有可能
handleFiles
永远不会把传递给它的函数作为第二个参数调用。这可能是一个时间问题，存在一个异步操作，在更新之前，您正在查看
URL
。每当在回调中更新全局文件时，这总是一个危险信号。如果回调是异步的，那么您就有麻烦了。如果
console.log（）
确实在回调中，如您在问题中所示，它应该显示所有URL。如果它在回调之外，您将遇到问题。请参阅删除了
async:false
。使用了此代码。但它不起作用。我要看看承诺是什么。@learner-我使用jQuery中内置的承诺添加了一个版本。如果第一个不起作用，那么可能只是某个地方的打字错误。如果您调试它并告诉我们您发现了什么，我们可能会帮助您修复它。当然，您还必须向我们展示您在适当位置使用
URL
变量执行操作时实际使用的代码。我是否需要带Promissions的回调函数？@learner-否。Promissions使用
。然后（）
处理程序进行自己的回调。这些是你在承诺中使用的回扣。我从promises实现中删除了
回调
参数。它没有被使用，只是意外地从原始代码中遗留下来。我尝试了所有的组合。承诺只提供最后一个url。我做
$.when.apply（$，promises）.then（函数（结果）{console.log（results.toString（））；document.getElementById（'id_file_URL'）。value=results.toString（）；}）
document.getElementById('question-file-selector').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
    var files = evt.target.files; //File list object
    var urls = "";
    // Loop through file list, render image files as thumbnails
    var doneCnt = 0;
    for (var i = 0, f; f = files[i]; i++) {
        handleFiles(f, function (url) {
            urls = urls + url + ',';
            console.log("urls is " + urls);
            ++doneCnt;
            if (doneCnt === files.length) {
                // The last handleFiles async operation is now done
                // final value is in urls variable here
                // you can use it here and ONLY here

                // Note: this code here will get executed LONG after the
                // handleFileSelect() function has already finished executing
            }
        });
        // Only process image files
        if (!f.type.match('image.*')) {
            $('#list').append('<img class="file-thumb" src="/static/download168.png"/>');
            continue;
        }
        var reader = new FileReader();
        //Closure to capture file information
        reader.onload = (function (theFile) {
            return function (e) {
                //Render thumbnail
                $('#list').append('<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/>');
            };
        })(f);
        reader.readAsDataURL(f);
    }
}

// You can't use the urls variable here.  It won't be set yet.

document.getElementById('question-file-selector').addEventListener('change', handleFileSelect, false);

function handleFileSelect(evt) {
    var files = evt.target.files; //File list object
    // Loop through file list, render image files as thumbnails
    var promises = [];
    for (var i = 0, f; f = files[i]; i++) {
        promises.push(handleFiles(f));
        // Only process image files
        if (!f.type.match('image.*')) {
            $('#list').append('<img class="file-thumb" src="/static/download168.png"/>');
            continue;
        }
        var reader = new FileReader();
        //Closure to capture file information
        reader.onload = (function (theFile) {
            return function (e) {
                //Render thumbnail
                $('#list').append('<img class="thumb" src="' + e.target.result + '" title="' + escape(theFile.name) + '"/>');
            };
        })(f);
        reader.readAsDataURL(f);
    }
    $.when.apply($, promises).then(function() {
        var results = Array.prototype.slice.call(arguments);
        // all handleFiles() operations are complete here
        // results array contains list of URLs (some could be empty if there were errors)
    });
}

function handleFiles(file) {
    var filename = file.name;
    return $.ajax({
        type: 'GET',
        data: {
            "filename": file.name,
            "FileType": "question_file"
        },
        url: '/dashboard/generateuploadurl/',
        contentType: "application/json",
        dataType: "json"
    }).then(function(data) {
        if (data.UploadUrl) {
            console.log("upload url successfully created for " + file.name + " file");
            console.log(data.UploadUrl);
            return handleUpload(data.UploadUrl, file, data.Filename);
        }
    }, function(err) {
        console.log("error occured while creating upload url for " + file.name + ' file');
        console.log(err);
        // allow operation to continue upon error
    });
}

function handleUpload(UploadUrl, file, Filename) {
    return $.ajax({
        xhr: xhr_with_progress,
        url: UploadUrl,
        type: 'PUT',
        data: file,
        cache: false,
        contentType: false,
        processData: false
    }).then(function(data) {
        console.log('https://7c.ssl.cf6.rackcdn.com/' + Filename);
        return 'https://7c.ssl.cf6.rackcdn.com/' + Filename;
    }, function(err) {
        console.log("error occured while uploading " + file.name);
        console.log(err);
        // allow operation to continue upon error
    });
}