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函数。这将获得源和fadeIn新HTML。

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

Jquery推荐旋转器Ajax函数运行较早

1 个答案: