jquery - Jquery证明旋转器Ajax功能提前运行

Question

我正在为我的网站使用 Jquery 制作一个推荐旋转器，但是 Ajax 函数运行得太早，所以你会看到 HTML 更改，然后它淡出，然后又重新出现。我试图找出问题所在，但我可以t 似乎找到它。

<div class="testimonials">
    <div id="testimonial"></div>
</div>
<script type="text/javascript">
    function loadTestimonial(){
        $("#testimonial").fadeOut(1000);
        $.ajax({
            url: "r/get_testimonial.php",
            cache: false,
            async: false,
            timeout: 1000,
            success: function(html){
                $("#testimonial").html(html);
            },
          });   
          setTimeout($("#testimonial").fadeIn(1000), 2000);
      } 
      $(document).ready(function(){
        loadTestimonial();
        setInterval (loadTestimonial, 5000) 
      });
</script>

Answer 1

试试这个代码：

<div class="testimonials">
    <div id="testimonial"></div>
</div>
<script type="text/javascript">
    function loadTestimonial(){
        $("#testimonial").fadeOut(1000, function(){
            $.ajax({
                url: "r/get_testimonial.php",
                cache: false,
                async: false,
                timeout: 1000,
                success: function(html){
                    $("#testimonial").html(html).fadeIn(1000);
                },
              });   
        });
      } 
      $(document).ready(function(){
        loadTestimonial();
        setInterval (loadTestimonial, 5000) 
      });
</script>

你的代码出了什么问题？ajax 代码被即时调用，它将在旧 HTML 准备就绪时替换它，我上面所做的是等待回调fadeOut()然后触发 Ajax 函数。这将获得源代码和fadeIn新的 HTML。

你可能认为它是一个同步功能（因为 Ajax 有async: false），但 jQueryfadeOut也是异步的，所以你不能像以前那样等待。