두 번째 jQuery 함수가 실행되지 않습니다.

Question

HTML 페이지의 "head"섹션 내에 두 개의 사용자 정의 함수를 만들었고 닫는 "body"태그 바로 전에 스크립트로 호출했습니다. 문제는 첫 번째 함수 (경고를 무시할 때까지 실행을 중단시키는)에 "alert"문을 포함하지 않으면 두 번째 함수가 작동하지 않는다는 것입니다.

나는 첫 번째 함수가 두 번째 것이 시작되기 전에 실제로 완전히 끝나지 않아서 내 경고문을 가지기 때문에 첫 번째 함수가 완료 될 시간이 있다고 생각합니다.

기능 중 하나는 DIV 태그에 이미지 목록을 작성하는 것입니다. 기능 2는 FlexSlider를 구현하여 이미지의 슬라이드 쇼를 시작합니다.

아래 내용을 그대로 사용하면 모든 이미지가 표시된 페이지가 렌더링됩니다. 경고 상자의 주석을 지우고 다시 실행하면 화면이 내 이미지로 렌더링되고 경고 상자가 닫히고 FlexSlider가 시작되어 슬라이드 쇼가 시작됩니다.

"head"섹션에 정의 된 두 가지 기능은 다음과 같습니다.

<script type="text/javascript"> 
     var buildslider = function() { 
      $.ajax({ 
       type: "GET", 
       url: "/myImages/homepageslider/PhotoGallery.xml", 
       dataType: "xml", 
       success: function(xml) { 
        $(xml).find('img').each(function() { 
         var location = '/myImages/homepageslider/'; 
         var url = $(this).attr('src'); 
         var alt = $(this).attr('alt'); 
         $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides'); 
        }); 
       } 
      }); 
     //alert("buildslider finished"); 
     }; 

     var runslider = function() { 
      $('.flexslider').flexslider({ 
       selector: '.slides > .slide-group', 
       controlNav: false, 
       directionNav: false 
      }); 
     }; 
    </script> 

다음은 "body"태그 근처의 코드입니다.

<script> 
     $(document).ready(function() { 
      buildslider(); 
      runslider(); 
      }); 
    </script> 

무엇이 잘못 되었습니까? 그리고 올바르게 수정하려면 어떻게해야합니까?

미리 감사드립니다. 데이비드.

Answer 1

ajax() 첫 번째 함수에서 반환 된 개체를 반환하십시오. 이것은 done과 fail 메소드를 드러내는 jQuery "promise"객체입니다. 이러한 메서드는 함수를 사용하므로 두 번째 함수를 done에 삽입하면됩니다.

<script> 
    $(document).ready(function() { 
     buildslider().done(runslider).fail(function(){ 
      alert("#%&£ happens!"); 
     }); 
    }); 
</script> 

약속을 사용하여보다 훨씬 더 유연하다 : 그것은 또한 쉽게 더 일반적인 방법으로 오류를 처리 할 수 ​​

<script> 
    $(document).ready(function() { 
     buildslider().done(runslider); 
     }); 
</script> 

: 그런 다음 실행

<script type="text/javascript"> 
     var buildslider = function() { 
      return $.ajax({ 
       type: "GET", 
       url: "/myImages/homepageslider/PhotoGallery.xml", 
       dataType: "xml", 
       success: function(xml) { 
        $(xml).find('img').each(function() { 
         var location = '/myImages/homepageslider/'; 
         var url = $(this).attr('src'); 
         var alt = $(this).attr('alt'); 
         $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides'); 
        }); 
       } 
      }); 
     }; 

     var runslider = function() { 
      $('.flexslider').flexslider({ 
       selector: '.slides > .slide-group', 
       controlNav: false, 
       directionNav: false 
      }); 
     }; 
    </script> 

: 아래의 예를 참조하십시오 콜백을 사용하고 복수 done() 함수를 지원하므로 지금 이렇게하는 것이 좋습니다.

참고 : 준비가 DOM에 대한 간단한 바로 가기 $(function(){ your code here }); 또는 당신은이 로컬로 DOM 준비 처리기 모두의 역할을 $ 사용 jQuery(function($){ your code here }); 범위가 갖고 싶어하고 로컬 충돌을 피하기 위해 $을 범위 제공 (예를 들어 다른 플러그인 포함) .

Answer 2

<script type="text/javascript"> 
     var buildslider = function() { 
      $.ajax({ 
       type: "GET", 
       url: "/myImages/homepageslider/PhotoGallery.xml", 
       dataType: "xml", 
       success: function(xml) { 
        $(xml).find('img').each(function() { 
         var location = '/myImages/homepageslider/'; 
         var url = $(this).attr('src'); 
         var alt = $(this).attr('alt'); 
         $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides'); 
        }); 
       } 
      }); 
     //alert("buildslider finished"); 
     }; 

     var runslider = function() { 
      $('.flexslider').flexslider({ 
       selector: '.slides > .slide-group', 
       controlNav: false, 
       directionNav: false 
      }); 
     }; 

     $(document).ajaxComplete(function(event, xhr, settings) { 
     if (settings.url === "/myImages/homepageslider/PhotoGallery.xml") { 
     runslider(); 
     } 
     }); 
    </script> 

이제 document.ready에서 runslider()를 호출 할 필요없이 buildslider()를 호출하면됩니다.아약스가 성공적으로 완료된 후 슬라이더 코드를 실행합니다

Answer 3

이

var buildslider = function() { 
    $.ajax({ 
     type: "GET", 
     url: "/myImages/homepageslider/PhotoGallery.xml", 
     dataType: "xml", 
     success: function(xml) { 
      $(xml).find('img').each(function() { 
       var location = '/myImages/homepageslider/'; 
       var url = $(this).attr('src'); 
       var alt = $(this).attr('alt'); 
       $('<div class="slide-group"></div>').html('<img src="'+location+''+url+'" alt="'+alt+'"/>').appendTo('.slides'); 
       $('.flexslider').flexslider({ 
        selector: '.slides > .slide-group', 
        controlNav: false, 
        directionNav: false 
       }); 
      }); 
     } 
    }); 
}; 

최종 스크립트 블록

$(document).ready(function() { 
     buildslider(); 
    }); 

주 뭔가를하려고합니다.