forEach中使用settimeout时遇到的问题

春に残る雪

于 2023-03-17 10:06:38 发布

阅读量458

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/wanxkdnvwsk/article/details/129612357

版权

遇到一个需求，在文件上传的时候第一次不需要传ID，但是在第一次传完之后后端会返回一个ID，在批量上传文件的时候，除了第一个文件，其他文件都需要传第一个文件上传完后返回的ID。
这还不简单吗直接就上手就是forEach里面给它来个定时器，第一次调用upload之后修改参数，后面的upload不就有ID了吗~期望的结果是它每过0.3秒调用一次upload，但是实际效果是一次性触发了全部的upload。

// 这就是错误的，达不到预期效果。
confirm(){
    this.base64UrlList.forEach(item => {
        setTimeout(() => {
            this.upload(item)
        }, 300);
    })
},

//那forEach不行，我用for循环呢？ 发现也不行
confirm(){
    console.log(this.base64UrlList)
    for(let i = 0; i < this.base64UrlList.length; i++ ) {
        this.upload(this.base64UrlList[i])
    }
},

// 最后利用 Promise和async/await函数，达到效果
async confirm(){
     console.log(this.base64UrlList)
     for(let i = 0; i < this.base64UrlList.length; i++ ) {
         await new Promise((resolve) => {
             setTimeout(() => {
                 this.upload(this.base64UrlList[i])
                 resolve()
             }, 300);
         })
     }
 }