是否可以确保在显示 confirm(） 框之前渲染 addClass(）

Is it possible to make sure addClass() is rendered before showing confirm() box?

本文关键字：addClass 确保 显示 confirm 是否      更新时间：2023-09-26

在下面的代码中，确认框在addClass被渲染之前显示（即Safari 6.0.5）。 是否可以确保在显示 confirm（） 框之前渲染 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>

不幸的是，我没有带有 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需要多长时间才能通过

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

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，请使用此答案对其进行更新。

我通过以下方式意识到它，但我没有使用它。因为在确认框打开之前是否附加类属性是模棱两可的，而且我不喜欢等待 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)
  }
})
相关文章：