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を置き換えます。私は​​のコールバックを待ってから、Ajax関数を起動します。どちらがソースを取得し、fadeIn新しいHTMLを取得します。

（Ajaxはasync: falseを持っていたので）あなたはそれが同期機能だと思うかもしれませんが、jQueryのfadeOutも非同期であるので、あなたがやった方法、そのために待つことはできません。