在.click上重新运行.getJSON以返回新结果(jQuery/AAJAX)

Question

这让我抓狂，但首先我想道歉。我是javascript/jquery的新手。然而，我确实尽了最大努力，通过不懈的搜索来解决这个问题，但没有成功。

这是我的问题：我正在为一位客户实现Flickr照片库，她坚持用它来上传她的照片。为了做到这一点，我使用了我购买的滑块库，以及一些jQuery/AAJAX来创建所有的函数/请求。滑块是一个jQuery脚本，它使用特定结构的选择器来创建幻灯片。结构如下：

<div class="slider">
    <div class="slider-item">
        <img src="path/to/img.jpg"/>
        <img class="thumbnail" src="path/to/img_thumbnail.jpg"/>
        <div class="caption">My Caption</div>
        <div class="thumbnail-caption">My Thumb Caption</div>
    </div>
</div>

我设置的功能是这样的：

   var $currentPage = 1;
    var $totalPages;
    var $sliderHTML = "<div class='slider'></div>";
    var $perPage = 18;
    function flickr(){
       $(function (){
            $($sliderHTML).prependTo("#portfolio");
            $.getJSON('http://path/to/flickr?perpage=' + $perPage + '&page=' + $currentPage + '&format=json&jsoncallback=?',
                function(data){
                    $totalPages = Math.ceil(data.photos.total / $perPage);
                    $.each(data.photos.photo, function(i,item){
                   // Loop results and grab all variables I need - Examples omitted
                   // After which, append variables to string
               var $sliderItem = '<div class="slider-item"><img height="' + imgHeight + '" src="' + photoURLo + '" alt="' + photoTitle + '" /><img height="75" width="75" class="thumbnail" src="' + photoURLm + '" alt="' + photoTitle + '" /><div class="caption">' + photoTitle + '</div><div class="thumbnailCaption">' + photoTitle + '</div></div>';
                   // Then append to the main div 
                  $($sliderItem).appendTo(".slider");
           });
      });
    }
// Finally call the function on document.ready
$(document).ready(function(){
   flickr();
});

为了确保在flickr函数完成之前不会加载滑块（这导致了错误），我只是将其封装在一个函数中，并在window.load上调用它，这非常有效。最后，我初始化了带有window.load事件的滑块。

$(window).load(aSlider()); // loads the slider script
$(window).load(advSlider()); // initializes the slider

整个设置非常好。开始

问题来了。我需要调用更多的图片，但这根本不起作用！以下是我的HTML中的代码片段：

 <script type="text/javascript">
        $('#moreSlides').click(function (){
            if($totalPages == $currentPage){ //checks for last page
                $currentPage = 1;            //resets to page one
            }
            else {
                $currentPage++;      // increments page 
            }
            $('.slider').remove();      //removes entire slider div              
            flickr();
            $(".slider-item").ajaxComplete(aSlider());
            advSlider();
        });
 </script>

无论如何，这总是失败的。我试着在控制台中逐步完成这个点击事件，它基本上看起来是到达flickr（）函数，并通过它而不是执行该函数（如果我在加载时在控制台中逐渐完成它，我可以看到这种情况）。然而，它最终确实执行了函数。。。它创建了div class=滑块，并在其中加载动画，但在那之后，它直到执行aSlider（）函数之后才加载幻灯片项。

我已经手动复制了我想在控制台中发生的事情，它运行良好：增加$currentPage:check。删除.looperdiv:check。执行flickr（）：check。执行aSlider：检查。初始化advSlider（）：check。所有第二页的图像都显示出来，一切都很完美。

序列出了问题，我根本不知道它是什么。我已经尽了一切努力让aSlider等待，但它不起作用。请帮忙！

感谢

Answer 1

我最终通过创建一个setTimeout循环（使用if语句）解决了这个问题。

function loadSlides(){
    if($totalPages != $currentPage){  // Making sure we're not on the last page, which may not have the exact $perPage number
        if($('.slider-item').size() == $perPage){ // See if all slides have loaded by counting number of .slider-item and comparing to $perPage variable
            $('#loader').remove();  // Remove loading animation
                aSlider();  // Execute Slider code
                setTimeout(function(){
                    advSlider();  // Instantiate slider (this may not be necessary on the setTimeout here, just being safe)
                },50);
        }
        else {
            setTimeout(function(){  // If all slides haven't loaded, wait 20ms and retry the function.
                loadSlides();
                    },20);
             }
                    }
    else {
        if($('.slider-item').size() == $lastPage){  //This is the same thing as about just takes into account $lastPage instead of $perPage
            $('#loader').remove();
            aSlider();
            setTimeout(function(){
                advSlider();
            },50);
         }
         else {
             setTimeout(function(){
                 loadSlides();
             },20);
         }
    }
}

这就是我必须要做的事情。我希望它能帮助那些无法同步加载b/c getJSON的人，这似乎是一个常见的问题。尽管setTimeout有点像黑客，但使用它可以让你的代码比像一些人那样输入一些通用数字更快地运行：

$(document).ready(function(){
    setTimeout(function(){
    aSlider();
    },1600);
});

像这样使用setTimeout是很糟糕的b/c，有时它太长，有时它仍然不够长。因此，为了让它始终正常工作，你必须设置一个非常高的超时。

正如我所说，我对这一切都很陌生，所以如果有人有更好的写作方式或同时做这件事，请随时回答！