根据滚轮判断是否刷新定时器功能

最新推荐文章于 2024-10-07 09:24:46 发布

qq_260043056

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量61

点赞数

分类专栏：前端文章标签： javascript jquery html

本文链接：https://blog.csdn.net/m0_47395232/article/details/109814776

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用JavaScript和jQuery监听滚轮事件，以触发页面刷新时的定时器功能。通过分析代码，我们可以了解到在用户滚动页面时如何控制定时器的启动和停止，从而优化用户体验。

摘要由CSDN通过智能技术生成

页面：

<style type="text/css">
    #b{
        width: 500px;
        height: 300px;
        top: 10px;
        left:30%;
        overflow:scroll;
        border: 1px solid red;
    }
</style>
<body>
<div id="a">
<div id="b"  onscroll="scrollxiaoxi()">
    <div id="c">
        <h5>asdf</h5>
        <h5 >asdf1</h5>
        <h5 >asdf2</h5>
        <h5>asdf3 </h5>
        <h5>asdf 4</h5>
        <h5>asdf 5</h5>
        <h5>asdf 6</h5>
        <h5>asdf 7</h5>
        <h5>asdf 8</h5>
        <h5>asdf 9</h5>
        <h5>asdf 0</h5>
        <h5>asdf 11-</h5>
        <h5>asdf 12</h5>
        <h5>asdf 13</h5>
        <h5>asdf 14</h5>
        <h5>asdf15 </h5>
        <h5>asdf16 </h5>
        <h5>asdf17 </h5>
        <h5>asdf18 </h5>
        <h5>asdf 19</h5>
    </div>
    <div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>
</div>
<div><button type="button" onclick="start()">开始刷新</button></div>
<div><button type="button" onclick="end()">暂停刷新</button></div>
<div><button type="button" onclick="again()">重新刷新</button></div>

JS部分：

//设置视图初始化为底部
<script type="text/javascript">
    $(function () {
        msg_end.scrollIntoView();
    })

    var timer;
    var c=["1","2","3","4","5","6","7","8","9","10","11","12","13"];
    timer=window.setInterval(sx, 500);

   function sx(){
       $("#c").text("")
       for (i=0;i<c.length;i++){
           $("#c").append(
               "<h5>"+c[Math.floor((Math.random()*c.length))]+"</h5>"
           )
       }
       msg_end.scrollIntoView();
   }



    function scrollxiaoxi () {
        let scrollTop = document.querySelector('#b').scrollTop || document.body.scrollTop;
        let clientHeight = document.querySelector('#b).clientHeight || document.body.clientHeight;
        let scrollHeight = document.querySelector('#b').scrollHeight || document.body.scrollHeight;
        // scrollTop(卷起来的高度) + clientHeight(可视高度) === scrollHeight（总高度）//判断是否在底部
        // scrollHeight > clientHeight避免在空的时候刷新
        if(scrollHeight > clientHeight && scrollTop + clientHeight === scrollHeight) {
                if (timer) {
                    return timer;
                } else {
                    timer = setInterval(sx, 500);
                }
        }else {
            if (timer) {
                        timer = clearInterval(timer);
                    } else {
                        return;
                    }
        }

    }

//开始
    function start() {
        if (timer) {
            return timer;
        } else {
            timer = setInterval(sx, 500);
        }
    }

    function end() {
        if (timer) {
            timer = clearInterval(timer);
        } else {
            return;
        }
    }

    function again(){
        clearInterval(timer);
        timer = setInterval(sx, 500);
    }


</script>