防抖函数和节流函数小列

最新推荐文章于 2024-06-25 01:37:55 发布

影魔_

最新推荐文章于 2024-06-25 01:37:55 发布

阅读量249

点赞数

分类专栏：前端开发 js

本文链接：https://blog.csdn.net/zluyao_/article/details/61193820

版权

前端开发同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        #d1{
            background: #ccc;
            height: 200px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        #d11{
            background: green;
            height: 1000px;
        }
        #d2{
            background: #f7f7f7;
            height: 200px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        #d22{
            background: red;
            height: 1000px;
        }
        #d3{
            background: #999;
            height: 200px;
        }
        #d4{
            background: #aaa;
            height: 200px;
        }
        #box{
            position: relative;
        }
        #box0{
            background: #eee;
            height: 260px;
        }
        #p-box{
            position: relative;
        }
        #p-box button{
            position: absolute;
            right: 0;
            top:0;
        }
        #p-box p{
            height: 50px;
            background: #ccc;
            border: 1px solid #fff;
        }
    </style>
</head>
<body>
<div id="box0">box0</div>
<div id="box">
    <div id="d1">
        <div id="d11"></div>
    </div>
    <div id="d2">
        <div id="d22"></div>
    </div>
    <div id="d3">3</div>
    <div id="d4">4</div>
</div>
<div id="p-box">
    <button id="btn">添加</button>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    var d1 = document.getElementById('d1');
    var d2 = document.getElementById('d2')
    $(function () {

    })
    var h;
    window.onscroll = function(){
        h = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(h);
    }
    /*setInterval(function () {
        console.log('h'+h);
    },500)*/


    /*节流函数*/  /*、一定时间内业务代码只执行一次,此处1秒内只打印一次0*/
    var canRun = true;
    document.getElementById("d1").onscroll = function(){
        if(!canRun){
            console.log("!canRun");
            // 判断是否已空闲，如果在执行中，则直接return
            return;
        }
        canRun = false;
        setTimeout(function(){
            console.log(0);//真正要执行的业务代码
            canRun = true;
        }, 1000);
    };

    // 函数防抖   /*、频繁出的情况下,一定的空闲时间才去执行一次业务代码,此处3秒不滚动滚动条才打印1*/
    var timer = false;
    document.getElementById("d2").onscroll = function(){
        clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
        timer = setTimeout(function(){
            console.log(1);//真正要执行的业务代码
        }, 3000);
    };



    $("#btn").on("click",function () {
        var p = "<p></p>";
        $("#p-box").append(p);
        console.log(h);
        h+=50;
        $('html,body').animate({
            scrollTop: h
        },200)

    })

    $("#p-box").on("click","p",function () {
        console.log(101);
        console.log(h);
        var _this = $(this);
        _this.remove();
        h-=50;
        console.log(h);
    })


</script>
</body>
</html>