在弹出确认对话框之前做点什么

Question

$('.lorem').on('click', function(){
$(this).hide();
if(prompt('DO SOMETHING') != null) {console.log('something');}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='lorem'>lorem</div>

所以我首先想隐藏div，然后弹出确认对话框。有可能吗？

Answer 1

使用动画帧在下一次绘制之前运行代码。

window.requestAnimationFrame((

$('.lorem').on('click', function(){
// The browser will paint async not sync, so the div may still be visible
// even after this line
$(this).hide();
// when the browser is ready to paint the div off screen the callback will fire
window.requestAnimationFrame(() => { 
if (prompt('DO SOMETHING') != null) {
console.log('something');
}
});
});

注意：您可能必须执行嵌套动画帧，因为浏览器往往会以不同的方式实现请求动画帧。

requestAnimationFrame(() => requestAnimationFrame(() => {
...
})); 

Answer 2

您可以使用setTimeout:

document.querySelector('.lorem').addEventListener('click',  () => {
document.querySelector('.lorem').style.display = "none";
setTimeout(() => {
if(prompt("do something") !== null) {
console.log('do something')
}
}, 100)
})