是否可以确保在显示确认（）框之前呈现 addClass（）？答案

【问题标题】：Is it possible to make sure addClass() is rendered before showing confirm() box?是否可以确保在显示确认（）框之前呈现 addClass（）？
【发布时间】：2013-10-04 18:22:10
【问题描述】：

在以下代码中，确认框显示在 addClass 渲染之前（即 Safari 6.0.5）。是否可以确保 addClass() 在显示确认（）框之前呈现？

<style type="text/css">
.preview    { background-color: #eee;width:100;height:100;color:red; }
.preview_s  { border:3px solid blue;}
</style>

<script type="text/javascript">
function test(i) 
{
    $("#testdiv"+i).addClass('preview_s');
    if (confirm('border not blue and checkmark not visible on some browsers until after choice is made'))
    {
        // Do confirmed thing here
    } else {
        // Abort
    }
}
</script>

<form id="testform">
<div class="preview" id="testdiv1">test1</div>
<input type="checkbox" onclick="test(1);">
<div class="preview" id="testdiv2">test2</div>
<input type="checkbox" onclick="test(2);">
</form>

【问题讨论】：

添加类不是异步的，所以会在下一行代码执行之前添加，至于渲染我不知道你的意思？
尝试将confirm 放在一个简短的setTimeout 中
我建议请提供一个 JSFiddle
@MonkeyZeus 给你：JSFiddle
@Basic 我无法重现该问题，但看起来应该可以：jsfiddle.net/aenJ7

标签： javascript jquery addclass confirm

【解决方案1】：

很遗憾，我没有带 Safari 的 Mac，但这样的东西能用吗？

<script type="text/javascript">
function test(i) 
{
    $("#testdiv"+i).addClass('preview_s');

    // wait 20 milliseconds before launching confirmation box
    setTimeout(function(){
        if (confirm('border not blue and checkmark not visible on some browsers until after choice is made')) {
            // Do confirmed thing here
        } else {
            // Abort
        }
    }, 20);

}
</script>

在获得添加类的指令后，几乎听起来 DOM 无法足够快地触发。

您始终可以将setTimeout 小幅增加，以查看addClass 需要多长时间

【讨论】：

抱歉这个菜鸟问题，但是：我将如何传递我的 i 变量？ setTimeout(function(i){ 不起作用。
如果我正确理解了 JS 变量范围，那么只要您在 setTimeout() 触发之前不更改它就应该可以访问它。想象一下以递增的i 运行for 循环。 i 可能会在 20 毫秒过去之前发生变化。

【解决方案2】：

经过编辑以提供...开箱即用的方法。

function runConfirm($div){
    if($div.hasClass('preview_s')){
        if (confirm('border not blue and checkmark not visible on some browsers until after choice is made')) {
            // Do confirmed thing here
        } else {
            // Abort
        }
    } else {
        runConfirm($div);
    }
}

function test(i) {
    var $div = $("#testdiv"+i);        

    $div.addClass('preview_s');
    runConfirm($div);
}

这应该会给你你想要的，因为被调用的函数会递归调用自己，直到满足.hasClass()。

由于您提供了 jsFiddle，updated it with this answer。

【讨论】：

有趣，但执行方式与我在 Safari 6.0.5 中的原始帖子相同。在 addclass 有机会呈现之前弹出确认对话框。
好的，我编辑了我的答案以尝试更有创意的东西。还更新了 jsfiddle，似乎可以按照您的描述工作。
感谢您的帮助，但在 Safari 6.0.5 中仍然无法正常工作
这是一个浏览器问题。您有一个应用于元素的类（除非该类存在，否则它不会触发），但浏览器未显示该类的 CSS。如果可能的话，你找到的任何解决方案都会令人难以置信，因为对于大多数浏览器来说，按类应用的 CSS 和屏幕上可见的 CSS 之间没有区别。

【解决方案3】：

我是通过以下方式实现的，但我没有使用它。因为在确认框打开之前是否附加了类属性是模棱两可的，我不喜欢等待80毫秒。

const wrapper = button.closest('.js-item-row')
let needsSubmit = false
button.addEventListener('click', function(e){
  if(!needsSubmit) {
    e.preventDefault()
    const message = button.getAttribute('data-confirm-message')
    wrapper.classList.add('dynamicScaffold-destorying')
    setTimeout(function(){
      if(!confirm(message)){
        wrapper.classList.remove("dynamicScaffold-destorying");
      } else {
        needsSubmit = true
        button.click()
      }
    }, 80)
  }
})

【讨论】：