setTimeout没有完全工作

setTimeout not completely working

本文关键字：工作 setTimeout      更新时间：2023-09-26

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

谢谢你的建议，

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

我有同样的问题，在setTimeout()不工作的函数调用。我通过将函数调用用引号括起来解决了这个问题。

例如:

 $("#yes").click(function() {
    $("#sleepanswer").animate({ opacity: 0 }, "fast");
    $("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
    setTimeout("moveit()", 2000);
  });
相关文章：