Вторая функция jQuery не работает

Question

Я создал две пользовательские функции в разделе «head» на странице HTML, и я вызываю их со сценарием непосредственно перед закрывающим тегом body. Проблема в том, что вторая функция не работает, если я не включу в первую функцию оператор «предупреждение» (который останавливает выполнение до тех пор, пока я не отпущу предупреждение).

Я предполагаю, что это вызвано первой функцией, которая фактически не заканчивается полностью до того, как начинается вторая, и, получив мой оператор предупреждения, он дает первое время функции для завершения.

Функция 1 - создать список изображений в тегах DIV. Функция two реализует FlexSlider для запуска слайд-шоу изображений.

Вызов ниже, так как он отобразит страницу со всеми показанными изображениями. Если я раскомментирую окно предупреждения и запустил его снова, экран будет отображаться с моими изображениями, я увольняю окно предупреждения, а затем FlexSlider запускает слайд-шоу и запускает его.

Вот две функции, определенные в разделе «глава».

<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> 

И вот код возле закрывающего тега «тело».

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

Что я делаю неправильно и как исправить это, чтобы это можно было сделать правильно?

Заранее спасибо. Дэвид.

Answer 1

Верните объект ajax() с первой функции. Это объект «обещание» jQuery, который затем выставляет методы done и fail. Эти методы принимают функцию, поэтому вы можете просто вставить свою вторую функцию в done. Смотрите пример ниже:

<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> 

Затем запустите с:

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

Это также делает его легче обрабатывать сбои в более общем виде:

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

Использование обещаний является гораздо более гибким, чем используя обратные вызовы и поддерживает несколько функций done(), поэтому теперь это предпочтительный способ сделать это.

Примечание: Более простой ярлык для DOM ГОТОВ $(function(){ your code here }); или если вы хотите иметь локальную область $ использование jQuery(function($){ your code here });, который действует как готовый обработчик DOM и обеспечивает локальную область $, чтобы избежать столкновений (например, с другими плагинами) ,

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> 

Теперь Просто вызовите buildslider() только нет необходимости называть runslider() в document.ready ..

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(); 
    }); 

Примечание: выполнить код слайдера после Ajax успешно завершен.