How to use setInterval and clearInterval for infinite gallery

Question

I am trying to fetch pictures for a gallery using JavaScript, but I experience problems.

$(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);


});

For some reason, it will keeping looping. I want it to stop the moment currentPage * picPerPage > totalPics.

i am using firefox 3.6.8 in ubuntu

update

Thank you guys.

i realise that the issue is due to the fetchNextPage() function.

oncei commented it out, the looping issue is resolved.

however, i need the fetchNextPage function to run a ajax function to fetch another set of images.

below is the function

function fetchNextPage(currentPage) {

    newUrl = currentUrl + currentPage;

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

        }
    });
}

so what should i do so that my infinite gallery can work?

Thank you.

Answer 1

Your code works for me. I put in console.log() instead of the function and did not correct intervalID not properly defined. Is it possible the function alters values?

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);

The output I got (Chrome 5.0.375.127 on OSX):

A 1
B 2
A 2
C All Done

UPDATE: So with your added code I have a few questions and comments:

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);
        }
    });
}

So whats missing here is the data that comes back... can you provide an example of what value data is?

Answer 2

Try adding var before intervalID = window.setInterval to correctly define the intervalID variable.

Answer 3

Alex's answer alluded to a possible problem.

This code works just fine in a test environment where there is no other code anywhere.

However, intervalID is defined as a global variable. If you have code executing elsewhere that also defines a value for intervalID, then it's going to be stomping all over this one.

Use var intervalID to limit the scope of this variable.