在 .click 上重新运行 .getJSON 以返回新结果（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 中的代码 sn-p：

 <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=slider，并在其中创建我的加载动画，但之后它不会加载幻灯片项目，直到它执行 aSlider() 函数。

我已经手动复制了我想在控制台中发生的事情，它工作正常：增加 $currentPage：检查。删除 .slider div：检查。执行 flickr():检查。执行滑块：检查。初始化 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);
         }
    }
}

这是我必须做的才能完成这项工作。我希望它对无法同步加载 b/c getJSON 的人有所帮助，这似乎是一个常见问题。尽管 setTimeout 是一种 hack，但使用它可以让您的代码运行得更快，而不是像某些人似乎做的那样输入一些通用数字：

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

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

就像我说的，我对这一切都很陌生，所以如果有人有更好的方法来写这篇文章或同时做，请随时回答！