如何在jQuery确认框弹出前为指定<td>添加Bootstrap danger类？

嗨，我完全明白你的困扰——点击删除按钮时，你想先把目标行标红再弹出确认弹窗，但现在弹窗先弹出来，取消后行才变红。这其实是JavaScript里同步阻塞函数导致的小问题，咱们一步步搞定它：

问题根源 #

confirm()是个同步阻塞函数，它会暂停所有JavaScript代码的执行，甚至会阻止浏览器更新DOM渲染。所以你先调用addRed()添加danger类，紧接着调用deleteInstance()里的confirm()，浏览器根本没时间去渲染新样式，直到你关闭弹窗后，才会继续处理样式更新。

解决方案 #

我们需要把confirm()的执行延迟一下，让浏览器先完成行的高亮渲染，再弹出确认框。具体修改如下：

1. 调整删除按钮的调用逻辑 #

不要在同一个href里同时调用两个函数，只调用addRed()即可：

<a href="javascript:addRed('<?=$_POST['class']?>',<?=$instance->getID()?>)" class="text-danger"><i class="glyphicon glyphicon-times"></i></a>

2. 修改addRed()函数，延迟弹出确认框 #

用setTimeout把deleteInstance()的调用放到浏览器的下一个事件循环里，给浏览器留足渲染样式的时间：

function addRed(className, id) { 
    var rowSelector = "#" + className + "_" + id;
    $(rowSelector).addClass("danger"); 
    console.log("classe mise"); 
    // 延迟10毫秒弹出确认框，足够浏览器完成DOM样式更新
    setTimeout(function() {
        deleteInstance(className, id, rowSelector);
    }, 10);
} 

3. 修复deleteInstance()的逻辑 #

原来的removeRed()调用没传参数，而且我们需要根据用户的选择来决定是否移除高亮类：

function deleteInstance(className, id, rowSelector) { 
    if(confirm('Voulez-vous vraiment supprimer cet enregistrement ?\nOPERATION IRREVERSIBLE')) { 
        $.blockUI(); 
        $.ajax ({ 
            url : 'action.php?action=deleteInstance', 
            type : 'post', 
            data : { 'class' : className, 'id' : id }, 
            dataType : 'json', 
            success : function(response) { 
                noty({ type : response.type, text : response.text }); 
                if(response.type=='success') search(); 
                $.unblockUI(); 
            }, 
            error: function (xhr, ajaxOptions, thrownError) { 
                noty({ type : 'error', text : 'Erreur lors de la suppression de l\'enregistrement.' }); 
                $.unblockUI(); 
                // 删除失败时，移除高亮样式
                $(rowSelector).removeClass("danger"); 
            } 
        }); 
    } else {
        // 用户取消删除，直接移除高亮样式
        $(rowSelector).removeClass("danger"); 
    }
}

4. 可选：移除冗余的removeRed()函数 #

因为我们已经在deleteInstance()里直接处理了移除样式的逻辑，如果其他地方没用到removeRed()，就可以删掉它啦。

为什么这样有效？ #

setTimeout会把回调函数放到浏览器的异步任务队列里，当前的同步代码（添加样式）执行完后，浏览器会先更新DOM渲染，再执行异步队列里的confirm()弹窗，这样用户就能看到高亮的行之后再确认删除操作了。

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