Можно ли сделать вывод, что addClass() отображается перед отображением поля подтверждения()?

Question

В следующем коде окно подтверждения отображается перед обработкой 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> 

Answer 1

Отредактировано, чтобы предоставить методологию ... из коробки.

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.

Answer 2

К сожалению, у меня нет Mac с Safari, но что-то вроде этой работы?

<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 пройти через

Answer 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) 
    } 
})