最近项目里用到了多选图片二维码识别上传,由于二维码识别是异步回调,再次列举一下如何在循环回调引用变量

描述

由于JS里for循环是同步任务,而reader.onloadend是异步任务,所以同步的会先执行完循环结束,等到异步回调引用外部变量所以,始终是循环最后一次值,so,归纳了下面三种方式

Promise

Promise.all函数可以并行调用参数中的Promise对象方法，并且将所有Promise对象方法返回值作为数组输入到then回调中

fileReaderPromise = (file) =>{
   let promise = new Promise((resolve, reject) =>{
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onloadend = (e) => {
                let new_result = e.target.result
                resolve(new_result)
            }
   });
   return promise;
}

handle_images = (files) => {
    let filesPromise = files.map(file => this.fileReaderPromise(file))
    Promise.all(filesPromise)
        .then(data => {
            data.map((image,index) => console.log('image',image,'index',index))
        })
}

自执行函数

创建自执行函数局部作用域,保证外部变量不受影响

handle_images = (files) => {
    _.map(files, (file,index) => {
        (function(new_file,new_index){
            let reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onloadend = (e) => {
                let new_result = e.target.result
                //...这里你可以引用new_file,new_index
                console.log('new_file',new_file,'new_index',new_index)
            }
         }.bind(this)(file,index)
    }
}

递归

handle_images = (i) => {
    let new_i = i
    if (new_i<files.length){
        let file = files[i]
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onloadend = (e) => {
            let new_result = e.target.result
            //...
            console.log('file',file,'i',i)
            
            //逻辑处理完后
            new_i++;
            this.handle_images(new_i)
        }
    }
}
//调用
this.handle_images(0)