Jquery推荐旋转器Ajax功能提前运行

Question

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

<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 代码被调用 imidiatly ，它将在准备好后替换旧的 HTML，我上面所做的是等待 fadeOut() 的回调，然后触发 Ajax 函数。这将获取源代码并淡入新的 HTML。

您可能认为它是一个同步函数（因为 Ajax 有 async: false），但 jQuery fadeOut 也是异步的，所以您不能像您那样等待。