jquery - Ajax for 循环中将变量 i 值递增到总长度

Question

我正在开发一个带有进度条的ajax上传，如果文件输入不是多个则没有问题，但我想开发一个多个ajax上传，因此我创建一个“for”循环，直到文件数量达到用户已选择。

当函数进入这里时，indice的值就是len变量的值，为什么会出现这种情况？

 myXhr.upload.addEventListener('progress', function(e) { progressHandlingFunction(e, '.prog'+(indice)) }, false);

完整代码:

<script type="text/javascript">
    $(document).ready(function(e){
        $('#uploader').submit(function(){
            var inpf = document.getElementById('files');
            var len = inpf.files.length;
            //console.log(inpf, len);return false;
            for(var i=0; i<len; i++){
                var indice = i;
                $('div').append('<progress class="prog'+i+'" value="0"></progress><br />');
                var formData = new FormData();
                formData.append('image', inpf.files[i]);
                $.ajax({
                    url: 'upload1.php',  //server script to process data
                    type: 'POST',
                    xhr: function() {  // custom xhr
                        var myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload){ // check if upload property exists
                            myXhr.upload.addEventListener('progress', function(e) { progressHandlingFunction(e, '.prog'+(indice)) }, false); // for handling the progress of the upload
                        }
                        return myXhr;
                    },
                    //Ajax events
                    //beforeSend: beforeSendHandler,
                    success: function(data){
                        completeHandler(data, '.prog'+i);
                    },
                    //error: errorHandler,
                    // Form data
                    data: formData,
                    //Options to tell JQuery not to process data or worry about content-type
                    cache: false,
                    contentType: false,
                    processData: false,
                });
            }
            return false;
        });
    });

    function progressHandlingFunction(e, klass){
        if(e.lengthComputable){
            $(klass).attr({value:e.loaded, max:e.total});
        }
    }

    function completeHandler(data, klass){
        $(klass).attr({value:0});
    }
</script>

这里有带有示例的 jsFiddle: http://jsfiddle.net/Pgq9s/

Answer 1

变量i的作用域为整个函数，而不是for循环的特定迭代。当执行 success 回调函数时，for 循环将完整执行，并且 i 将等于其执行后的值。最终迭代(所以i == len)。

使用立即调用的函数表达式创建闭包，并保留该迭代的 i 值:

for(var i=0; i<len; i++){
    var indice = i;
    $('div').append('<progress class="prog'+i+'" value="0"></progress><br />');
    var formData = new FormData();
    formData.append('image', inpf.files[i]);
    (function(index) {
    $.ajax({
        url: 'upload1.php',  //server script to process data
        type: 'POST',
        xhr: function() {  // custom xhr
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // check if upload property exists
                myXhr.upload.addEventListener('progress', function(e) { progressHandlingFunction(e, '.prog'+(index)) }, false); // for handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        //beforeSend: beforeSendHandler,
        success: function(data){
            completeHandler(data, '.prog'+index);
        },
        //error: errorHandler,
        // Form data
        data: formData,
        //Options to tell JQuery not to process data or worry about content-type
        cache: false,
        contentType: false,
        processData: false,
    });
    })(i);
}