Auto navigate to next page every x seconds

Question

I'm developing a jquery mobile application and i have a page index.html which contains 7 jqm pages and what i want to achieve is one every 3 seconds it should navigate to the next page but stop when it gets to the last page 7

$(function() {
    location.href = "#page1"
    var goToNextPage = null;
    function updatePage() {
        var currentPage = Number(location.hash.slice(-1));
        // if `currentPage` is less than 7
        if (currentPage !== 7) {

            goToNextPage = setTimeout(function() {
                if ((currentPage + 1) <= 7) {

                    // set `location.href` to `#page` + `currentPage` + `1`


                     $.mobile.changePage($('#page'+(currentPage + 1)), { transition: "slide"});
                    console.log(location.hash);
                    // reset event handlers

                }
            }, 3000);
        }
    }

});

the problem is i've named the pages as #page1,#page2,#page3 up to #page7. and there's a link on each of the pages that takes me to a different called called #regis. But when i'm on the regis page the auto navigation still takes place by bringing me back

Answer 1

When you navigate to the #regis page you need to disable the timer that is navigating to the other pages. I would suggest doing this by making your link to the #regis page call a javascript function which will disable the timer and then navigate to the right page.

Something like this:

var goToNextPage = null;

function clickRegis(){
    clearTimeout(goToNextPage)
    $.mobile.changePage($('#regis'), { transition: "slide"});
}

$(function() {
    location.href = "#page1"

    var currentPage = Number(location.hash.slice(-1));

    // if `currentPage` is less than 7
    if (currentPage !== 7) {
        goToNextPage = setTimeout(function() {
            if ((currentPage + 1) <= 7) {
                // set `location.href` to `#page` + `currentPage` + `1`
                $.mobile.changePage($('#page'+(currentPage + 1)), { transition: "slide"});
                console.log(location.hash);
            }
        }, 3000);
    }
});