超时后的jQuery火灾事件

Question

I've implemented auto page scrolling using the jQuery plugin datatables .

I'm attempting to add two buttons, one that stops the auto scrolling and one that starts it again. I've gotten this working, but I want it to begin scrolling again if the page has been stopped for a period of time. Here is what I have tried:

var refreshRate = 5;
var totalPages = 0;
var currentPage = 0;
var upTime = 0;

$('document').ready(function(){
var interval = window.setInterval('$("#start").click()',refreshRate);

    $("#start").click(function(){
        function start(){
            clearInterval(timeout);
            $("#stop").show();
            $("#start").hide();
            currentPage = table.api().page.info().page + 1;
            totalPages = table.api().page.info().pages;
            table.api().ajax.reload(function(json){

                if (currentPage != totalPages){
                    table.api().page('next').draw(false);
                }
                else{
                    table.api().page('first').draw(false);
                }
            });

            upTime = upTime + (refreshRate / 1000);
            clearInterval(interval);
            interval = setInterval('$("#start").click()', refreshRate);
        }
        start();
    });

    $("#stop").click(function(){
        $("#stop").hide();
        $("#start").show();
        timeout();

        clearInterval(interval);

    });

//call start on doc ready to auto start scrolling
    start();

    function timeout(){
        var timeout = window.setInterval(function(){


            start();
        }, 10000);
    }
});

As you can see I am attempting to call the start() function embedded within the button click after a 10 second timeout. I am also getting a TypeError when I call start() at DOM ready to begin page scrolling.

Uncaught TypeError: object is not a function

But besides the error it scrolls as it should. Any assistance?

Answer 1

You are having issues with function scope. Your code that called start towards the bottom did not have start in its scope since you defined it inside the click handler. Also, timeout was outside of the scope too, which would cause the interval to go on forever:

$('document').ready(function(){
    var timeout,
        interval = window.setInterval('$("#start").click()',refreshRate);
    function start(){
            clearInterval(timeout);
            $("#stop").show();
            $("#start").hide();
            currentPage = table.api().page.info().page + 1;
            totalPages = table.api().page.info().pages;
            table.api().ajax.reload(function(json){

                if (currentPage != totalPages){
                    table.api().page('next').draw(false);
                }
                else{
                    table.api().page('first').draw(false);
                }
            });

            upTime = upTime + (refreshRate / 1000);
            clearInterval(interval);
            interval = setInterval('$("#start").click()', refreshRate);
    }

    function timeout(){
        timeout = setInterval(function(){
            start();
        }, 10000);
    }

    $("#start").click(function(){            
        start();
    });

    $("#stop").click(function(){
        $("#stop").hide();
        $("#start").show();
        timeout();    
        clearInterval(interval);

    });

    //call start on doc ready to auto start scrolling
    start();    
});