嘗試使用jQuery當用戶到達頁面底部時停止計時器

Question

我有一個計時器，在頁面加載時開始計時。 我希望它在用戶滾動到頁面底部時停止。 這是我編寫的jQuery：

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


});

計時器的計數非常完美，問題是我無法停止計時。 如果我替換stop = true; 符合alert('abc'); ，當用戶到達底部時，警報就會顯示出來。 因此所有部分都在工作，只是出於某種原因將stop設置為true不會阻止timerTick函數進入if(stop == false)塊。

有人可以告訴我我在做什么錯嗎？

---

編輯：我做了一個jsFiddle 。

Answer 1

當用戶到達頁面末尾時，您必須清除間隔。 否則它將繼續執行。

嘗試：

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

確定頁面底部，您可以嘗試此操作

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

更新：
您需要使變量全局stop ，並在documnet.ready函數外部聲明它。

Answer 3

setInterval函數返回數字，您以后可以將其傳遞給clearInterval以停止計時器。

Answer 4

宣布

var Timeout=0;

校驗

 if(stop == false) 

在setInterval函數中

喜歡

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