element-UI$confirm消息提示搭配for of 使用.不能生成多个confirm的问题.

本文探讨了在JavaScript中使用for...of循环遍历数据生成多个confirm弹窗时遇到的问题,即由于异步执行机制,只会显示最后一个数据的弹窗。解决方案包括使用forawait...of循环,确保每个confirm弹窗在上一个关闭后才显示,以及递归方法,但后者不被推荐。注意,forawait...of只能在async函数内部使用,并且不适用于非异步可迭代的异步迭代器。

问题描述

用for of 循环遍历数据,生成多个confirm弹窗.然后逐个关闭

遇到问题:

只会生成以最后一条数据为准的confirm弹窗,详细情况见图例
在这里插入图片描述
在这里插入图片描述
如果所示数组长度为5,但是只弹窗了最后一个数据的弹窗.我们想要的效果是生成五个弹窗,然后逐步关闭

原因分析:

因为异步执行机制会导致只能生成最后一次循环结果,不能生成多个confirm,导致需求无法完成.


解决方案1(推荐使用的方法for await…of):

使用for await…of 在完成当前confirm弹窗并且回调后,在弹出下一次的confirm弹窗

在这里插入图片描述
第一次弹窗-第一条数据
在这里插入图片描述
点击取消后出现-第二次弹窗-第二条数据

在这里插入图片描述
以此类推,可完成需求

解决方案2(不推荐使用,递归):

.在这里插入图片描述
第一次弹窗-谈最后一条数据为主的弹窗

在这里插入图片描述
点击取消或者确定后出现第二次弹窗,显示倒数第二条数据,以此类推
在这里插入图片描述

注意事项:

类似于 await 运算符一样,该语句只能在一个async function 内部使用。for await…of 不适用于不是异步可迭代的异步迭代器。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值