javascript - setTimeout不能完全正常工作

在下面的代码中，我的div函数中的moveit()动画正在等待setTimeout()函数中的.click，但是p.font-size中的moveit()动画在单击时立即发生。它不是在等待超时。我确定这是一个基本问题，但这就是我现在的水平。

感谢您的任何建议，

<script type="text/javascript">
$(document).ready(function(){
  $("#no").click(function() {
    $("#sleep").animate({"border-width": "10px"}, "fast");
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p:.sleepquestion").replaceWith("That is too bad. Tonight you will sleep better.");
    setTimeout(moveit, 2000);
  });
  $("#yes").click(function() {
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
    setTimeout(moveit, 2000);
  });
});
</script>
<script type="text/javascript">
  function moveit() {
    $("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
    $("p.sleepquestion").animate({"font-size": "16px"}, "slow");
    $("#sleepanswer").animate({ "left": "-9999px"}, "fast");
  }
</script>

最佳答案

我认为问题可能出在您使用.replaceWith()。试图用另一个替换一个元素，但是您尝试用文本替换一个元素。我认为您只想使用.html()即可。

另外，您不需要使用setTimeout()-可以使用.delay()。而且，我认为您的选择器p:.sleepquestion可能不正确。您可以这样做：

<script type="text/javascript">
$(document).ready(function(){
  $("#no").click(function() {
    $("#sleep").animate({"border-width": "10px"}, "fast");
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p.sleepquestion").html("That is too bad. Tonight you will sleep better.");
    moveit();
  });
  $("#yes").click(function() {
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p.sleepquestion").html("That is great! A good night sleep is important.");
    moveit();
  });
});
</script>
<script type="text/javascript">
  function moveit() {
    $("#sleep").delay(2000).animate({"left": "10px", "width": "150px"}, "slow");
    $("p.sleepquestion").delay(2000).animate({"font-size": "16px"}, "slow");
    $("#sleepanswer").delay(2000).animate({ "left": "-9999px"}, "fast");
  }
</script>

我也将.replaceWith()更改为.html()，并将p:.sleepquestion更改为p.sleepquestion。

通过将超时放入函数中，也可以这样编写函数moveit：

function moveit() {
    setTimeout(function() {
        $("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
        $("p.sleepquestion").animate({"font-size": "16px"}, "slow");
        $("#sleepanswer").animate({ "left": "-9999px"}, "fast");
    }, 2000);
}