Question

我正在尝试使用JavaScript获取图库的图片，但我遇到了问题。

$(document).ready(function() {

    var currentPage = 1;
    var totalPics = 2;
    var picPerPage = 1;
    intervalID = window.setInterval(function() {
          console.log(currentPage*picPerPage);
          if (totalPics > (currentPage*picPerPage)) {
        currentPage++;
        fetchNextPage(currentPage);
          } else {
        clearInterval(intervalID);
          }


    }, 2000);


});

出于某种原因，它会保持循环。我希望它能暂停currentPage * picPerPage > totalPics。

我在ubuntu中使用firefox 3.6.8

更新

谢谢你们。

我意识到问题是由fetchNextPage（）函数引起的。

Oncei评论说，循环问题已经解决。

但是，我需要fetchNextPage函数来运行ajax函数来获取另一组图像。

以下是功能

function fetchNextPage(currentPage) {

    newUrl = currentUrl + currentPage;

    $.ajax({
        url: newUrl ,
        success: function(data) {
            // append page 2 themes
            $('#themes-list').append(data);

        }
    });
}

那么我该怎么办才能使我的无限画廊能够发挥作用？

谢谢。

Answer 1

您的代码适合我。我输入console.log（）而不是函数，并且没有正确定义intervalID。函数是否可能改变值？

var currentPage = 1;
var totalPics   = 2;
var picPerPage  = 1;

intervalID = window.setInterval(function() {

    console.log("A", currentPage*picPerPage);

    if (totalPics > (currentPage*picPerPage)) {
        currentPage++;
        console.log("B", currentPage);
    } else {
        console.log("C All Done");
        clearInterval(intervalID);
    }

}, 2000);

我得到的输出（OSX上的Chrome 5.0.375.127）：

A 1
B 2
A 2
C All Done

更新：所以使用您添加的代码我有几个问题和评论：

function fetchNextPage(currentPage) {
    var newUrl = currentUrl + currentPage; // Added var declaration here. 
    $.ajax({
        url: newUrl ,
        success: function(data) {
            // append page 2 themes
            $('#themes-list').append(data);
        }
    });
}

所以这里缺少的是返回的数据......你能提供一个值data的例子吗？

Answer 2

尝试在var之前添加intervalID = window.setInterval以正确定义intervalID变量。

Answer 3

亚历克斯的答案提到了可能存在的问题。

此代码在任何地方都没有其他代码的测试环境中运行良好。

但是，intervalID被定义为全局变量。如果你在其他地方执行的代码也为intervalID定义了一个值，那么它就会在这个代码上踩踏。

使用var intervalID限制此变量的范围。

如何将setInterval和clearInterval用于无限图库

3 个答案: