当前效果100%完成后，不会执行回调函数

Question

我正在通过https://www.w3schools.com/jquery/jquery_callback.asp正如标题所说，：在当前效果100%完成后执行回调函数

在我的Html主体中，我有一个按钮和一个p标记。但是当id添加一个带有回调函数的效果显示时。它可能不像以前说的那样。这让我有点困惑。有人能为我解释一下吗？

我的期望：单击按钮=>隐藏p标记=>显示警报"；1〃=>显示p标记=>显示警报"；2〃
但结果是：单击按钮=>隐藏p标记=>显示警报"；1〃=>显示警报"；2〃=>显示p标签

$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("1");
});

$("p").show("slow", function(){
alert("2");
});
});
});

Answer 1

使用setTimeout来防止alert阻塞UI。您可能需要修改延迟以满足您的需要。

$("p").show("slow", function(){
setTimeout(()=>alert("2"), 0);
});

$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("1");
});
$("p").show("slow", function(){
setTimeout(()=>alert("2"), 200);
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
Do It
</button>
<p>
Paragraph
</p>