尝试使用jQuery当用户到达页面底部时停止计时器

Question

I have a timer that starts counting up when the page is loaded. I want it to stop when the user scrolls to the bottom of the page. Here is the jQuery I've written:

function timerTick(time, stop)
{
    if(stop == false)
    {
        setInterval(function () 
        {
            time += 1;
            var displayTime = time/10;
            if(displayTime % 1 != 0)
            {
                $('.time').text(displayTime.toString());
            }
            else
            {
                $('.time').text(displayTime.toString() + ".0");
            } 

        }, 100);
    }
    else //behavior is the same if i remove the else block
    {
        return;
    }
}

$(document).ready(function () {
    var time = 0;
    var stop = false;

    timerTick(time, stop);

    //check if we're at the bottom
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            stop = true;
        }
    });


});

The timer counts up perfectly, the problem is I can't get it to stop. If I replace the stop = true; line with alert('abc'); , the alert shows up when the user reaches the bottom. So all of the pieces are working, just for some reason setting stop to true doesn't stop the timerTick function from going into the if(stop == false) block.

Can someone tell me what I'm doing wrong?

---

Edit: I made a jsFiddle .

Answer 1

You have to clear interval as soos as user reach the end of page. Otherwise it will continue executing.

Try:

var intervalId;

    function timerTick(time, stop)
    {
        if(stop == false)
        {
            intervalId=setInterval(function () //Set the interval in a var
            {
                time += 1;
                var displayTime = time/10;
                if(displayTime % 1 != 0)
                {
                    $('.time').text(displayTime.toString());
                }
                else
                {
                    $('.time').text(displayTime.toString() + ".0");
                } 

            }, 100);
        }
        else //behavior is the same if i remove the else block
        {

            return;
        }
    }

    $(document).ready(function () {
        var time = 0;
        var stop = false;

        timerTick(time, stop);

        //check if we're at the bottom
        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
                stop = true;
                clearInterval(intervalId);//HERE clear the interval
            }
        });


    });

DEMO

Answer 2

to determine bottom of the page you could try this

if(window.innerHeight + document.body.scrollTop >= document.body.offsetHeight) {
    stop = true;
}

Update:
you need to make your variable stop global, declare it outside of documnet.ready function.

Answer 3

setInterval函数返回数字，您以后可以将其传递给clearInterval以停止计时器。

Answer 4

Declare

var Timeout=0;

check

 if(stop == false) 

inside the setInterval function

like

  Timeout=setInterval(function () 
    {

       if(stop == false) 
            {
        time += 1;
        var displayTime = time/10;
        if(displayTime % 1 != 0)
        {
            $('.time').text(displayTime.toString());
        }
        else
        {
            $('.time').text(displayTime.toString() + ".0");
        } 
             }
       else

             {
            clearInterval(Timeout);
             }

    }, 100);