如何强制jquery.confirm完成交互后再继续执行后续代码

我太懂你这个困扰了！你现在的问题核心就是jquery.confirm是异步弹窗——它不会卡住代码等着用户点按钮，而是直接跳过弹窗继续往下跑，所以你的validateColor函数还没等用户做出选择就已经“结束”了，自然拿不到正确的keep_going值。

那怎么让代码乖乖等用户点完按钮再走呢？关键是用Promise把这个异步的弹窗操作“包装”成可以被等待的对象，再配合async/await让代码暂停等待。

给你改好的完整代码，我一步步给你说为啥这么改：

$("#ClickMe").click(async function () { 
  var color = 'red'; 
  // 用await等待validateColor的结果，代码会暂停到用户点击按钮后再继续
  keep_going = await validateColor(color); 
  console.log('value of keep_going: ' + keep_going); 
}); 

function validateColor(color) {
  // 这里返回一个Promise，把用户的点击结果传递出去
  return new Promise((resolve) => {
    if (color == 'blue') { 
      // 如果是蓝色，直接确认通过
      resolve(true); 
    } else { 
      $.confirm({ 
        title: 'Notice!', 
        content: 'Is it OK that the color is not blue?', 
        type: 'blue', 
        buttons: { 
          Continue: { 
            action: function () { 
              // 用户点了继续，把结果设为true
              resolve(true); 
            } 
          }, 
          cancel: function () { 
            // 用户点了取消，把结果设为false
            resolve(false); 
          }, 
        } 
      }); 
    }
  });
}

关键修改点说明： #

• 把validateColor改成返回Promise：Promise就是专门处理这种“需要等结果的异步操作”的，它会一直处于等待状态直到用户点击按钮，然后通过resolve()把结果传递给等待它的代码。
• 点击事件的处理函数加上async关键字，并用await调用validateColor：await会让代码在这里暂停执行，直到Promise拿到用户的点击结果，之后才会继续运行后续的console.log。
• 弹窗按钮里改用resolve(true/false)：这里不再是给弹窗返回值，而是把用户的选择传递给外部等待的代码，确保结果能正确传递出去。

这样改完之后，代码就会严格等用户完成弹窗的交互，拿到结果之后再继续执行后续逻辑啦。

内容来源于stack exchange