CODEWITHSUNDEEP
javascriptjqueryeventstimerscroll
xcdemon05
xcdemon05

Reputation: 716

trying to make a timer stop when the user reaches the bottom of the page using jQuery

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.

Upvotes: 1

Views: 116

Answers (4)

laaposto
laaposto

Reputation: 12213

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

Upvotes: 1

Arunkumar Vasudevan
Arunkumar Vasudevan

Reputation: 5330

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

Upvotes: 0

Vlas Bashynskyi
Vlas Bashynskyi

Reputation: 2013

setInterval function returns number that you can later pass into clearInterval to stop the timer.

Upvotes: 0

Matas Vaitkevicius
Matas Vaitkevicius

Reputation: 61401

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.

Upvotes: 0

Related Questions