如何在jQuery循环中正确使用async/await？加载功能失效求助

你设置加载状态后，立即执行了恢复按钮的代码——因为自执行的async函数是异步的，主线程不会等待它完成，所以按钮刚变成加载状态就被还原了，导致加载图标看起来没生效。另外，自执行函数里的$(this)指向不对，会找不到目标元素。

把恢复按钮状态的逻辑移到async函数内部，并且等所有saveQuestion执行完成后再执行，同时缓存原点击事件的this避免指向错误：

$(document).on("click", ".update_qualify_question", async function (e) {  
    var btnObj  = $(this); // 直接用当前点击的按钮，避免类选择器选中多个按钮
    var btnTxt = btnObj.text();
    var that = this; // 缓存原this，避免async函数内指向错误

    btnObj.html('Processing <i class="fa fa-spinner fa-spin"></i>');
    btnObj.attr('disabled', 'disabled');
    
    try {
        // 把each改成for...of，确保await顺序执行（each的async回调无法被正确等待）
        const questions = $(that).closest('.conditional_qa_portion').find(".current_question");
        for (const question of questions) {
            await saveQuestion($(question), 1);
        }
    } finally {
        // 不管成功失败都恢复按钮状态
        btnObj.html(btnTxt); 
        btnObj.removeAttr('disabled');  
    }
});

• 把点击事件处理函数改成async，不用嵌套自执行async函数，简化逻辑
• 用$(this)获取当前点击的按钮，避免类选择器选中多个按钮
• 缓存that = this，确保在后续DOM查找时指向正确的上下文
• 把each替换成for...of循环，因为jQuery的each不会等待async回调完成，for...of能保证顺序执行并等待每个await saveQuestion完成
• 用try...finally包裹异步逻辑，确保不管异步操作成功还是失败，按钮状态都会恢复

内容的提问来源于stack exchange，提问作者ManiMuthuPandi