满足条件时等待Sweet Alert输入否则继续执行的实现方法
问题根因
SweetAlert2 的弹窗操作是异步非阻塞的,调用swalBs.fire()会立刻返回一个Promise对象,不会暂停后续同步代码执行。原写法里弹窗刚弹出还没等用户完成输入/点击确认,下方的$.post逻辑就已经执行,此时secondary变量始终是初始的null值,不符合预期。
修改方案
把提交请求的逻辑抽成可复用函数,需要弹窗的分支等待用户交互完成后再调用提交逻辑,不需要弹窗的分支直接调用提交逻辑即可,修改后的完整代码如下:
$('#cart').on('click', '.button', async function() { const code = $(this).data('code') // 抽离统一提交逻辑,避免重复代码 const submitRequest = (secondaryCode = null) => { const repeated = 0 if (repeated < 1) { $.post(serviceUrl, { c : code, s : secondaryCode }, function(response) { // 原有响应处理逻辑 ... }) .fail(function() { // 原有请求失败处理逻辑 ... }) } else { swalBs.fire('Error', 'Code already entered', 'error') } } if (code !== '' && code !== null && code !== undefined) { // 需要输入二级编码的分支:等待用户输入完成再提交 if (code.startsWith('ABC')) { const result = await swalBs.fire({ text: 'Enter secondary code', showCancelButton: true, cancelButtonText: 'Cancel', showConfirmButton: true, confirmButtonText: 'Confirm', reverseButtons: true, input: 'text', inputValidator: (value) => { if (!value) { return 'Code required' } } }) // 用户点击取消直接终止流程,不发起请求 if (!result.isConfirmed) return // 传入用户输入的二级编码提交 submitRequest(result.value) } else { // 不需要二级编码的分支:直接提交,无额外等待 submitRequest() } } else { swalBs.fire('Enter code', 'Field must not be blank.') } })
关键改动点
- 给点击事件的回调函数加了
async关键字,支持用await语法等待SweetAlert的异步操作结果,阻塞后续流程直到用户完成弹窗交互 - 把
$.post相关的提交逻辑抽成独立的submitRequest复用函数,避免不同分支重复编写相同的请求代码 - 二级编码输入弹窗分支通过
await拿到用户操作结果后,先判断用户是否点击确认:如果点取消直接终止流程不发请求,如果输入合法点了确认,再把拿到的二级编码传入提交函数发起请求 - 不需要二级编码的分支直接调用提交函数,执行逻辑和原脚本完全一致,不会产生额外等待
- 额外注意:原代码中
repeated变量写在点击回调内部,每次点击都会被重置为0,重复提交校验逻辑不会生效,实际使用时需要把这个变量定义在点击事件的外层作用域持久存储状态
内容的提问来源于stack exchange,提问作者Fid
相关产品推荐
相关产品推荐

