如何使用 setInterval 和clearInterval 进行无限画廊

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 > 的那一刻停止总图片。

我在 ubuntu 中使用 firefox 3.6.8

更新

谢谢你们。

我意识到问题是由于 fetchNextPage() 函数造成的。

一旦我将其注释掉，循环问题就解决了。

但是，我需要 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

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

Answer 3

亚历克斯的回答暗示了一个可能的问题。

这段代码在没有其他代码的测试环境中运行得很好。

但是，intervalID 被定义为全局变量。如果您在其他地方执行的代码也为 intervalID 定义了一个值，那么它将严重影响这个值。

使用var IntervalID来限制该变量的范围。