重新运行.getJSON on .click返回新结果（jQuery/AJAX）

Question

这让我疯狂，但首先我想道歉。我对javascript/jquery非常陌生。然而，我确实尽力通过不懈地寻找来解决这个问题，但无济于事。

这是我的问题：我正在为客户端B/C实施Flickr照片库，她坚持使用它来上传她的照片。为此，我使用了我购买的滑块库，以及一些jQuery/AJAX来创建所有功能/请求。该滑块是一个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。删除.slider div：检查。执行flickr（）：检查。执行aSlider：检查。初始化advSlider（）：检查。所有的第二页图像都可以完美显示。

该序列有些问题，我根本不知道它是什么。我尝试了一切可以找到的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); 
     } 
    } 
} 

这是我不得不做的工作。我希望它可以帮助某人getJSON无法同步加载，这似乎是一个常见问题。虽然setTimeout的是怎样的一个黑客，利用这将使您的代码不是把像一些人一些通用的人数更快速地运行似乎做：

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

使用的setTimeout一样，是可怕的B/C有时它的方式太长，有时还不够长。所以为了让它始终正常工作，你必须设置一个非常高的超时时间。

就像我说的，我对这一切都很陌生，所以如果任何人有更好的写作方式或做同一个时间，随时回答！