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

【问题标题】：trying to make a timer stop when the user reaches the bottom of the page using jQuery尝试在用户使用 jQuery 到达页面底部时停止计时器
【发布时间】：2014-07-04 13:43:24
【问题描述】：

我有一个计时器，它在页面加载时开始计数。我希望它在用户滚动到页面底部时停止。这是我写的 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;
        }
    });


});

计时器完美计数，问题是我无法让它停止。如果我用alert('abc'); 替换stop = true; 行，当用户到达底部时会显示警报。所以所有的部分都在工作，只是出于某种原因将 stop 设置为 true 并不会阻止 timerTick 函数进入 if(stop == false) 块。

谁能告诉我我做错了什么？

编辑：我做了一个jsFiddle。

【问题讨论】：

标签： javascript jquery events timer scroll

【解决方案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

【讨论】：

【解决方案2】：

要确定页面底部，你可以试试这个

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

更新：
您需要将变量 stop 设为全局变量，在 documnet.ready 函数之外声明它。

【讨论】：

就像我说的，如果我使用警报而不是将 stop 设置为 true，警报会出现在页面底部。所以我在这方面工作得很好。另外，刚刚测试了它的傻瓜，它也没有工作。
为什么它需要是全球性的？我将它作为参数传递。（诚实的问题，不是一个聪明的驴子）
因为scroll 触发时它不是来自document.ready 内部，并且在 JS 中变量是函数范围的。

【解决方案3】：

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

【讨论】：

【解决方案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);

【讨论】：