节流和防抖

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>函数节流和函数防抖</title>
    <style>
        .demo {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            overflow-y: scroll;
            margin-top: 50px;
        }

        .scroll {
            height: 5000px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="nothing" class="demo">
            普通滚动
            <div class="scroll"></div>
        </div>
        <div id="throttle" class="demo">
            函数节流
            <div class="scroll"></div>
        </div>
        <div id="debounce" class="demo">
            函数防抖
            <div class="scroll"></div>
        </div>
    </div>
    
</body>
<script type="text/javascript">
    /**
     * 函数防抖: 判断用户的最后一次行为,如注册页面用户频繁点击注册按钮,等他最后一次停下再执行函数,
     *          比如点赞功能,用户频繁点击情况下等他停止了,以最后一次为基准
     *
     * 函数节流: 使频发触发的函数减少触发次数,如onscroll事件,本来是滚动条一滚动就会触发,但是为了节省性能,需要使这个事件
     *          在一定时间内只触发一次达到节省性能的目的,使用定时器规定一定时间内只触发一次
    */

    function name(params) {
        console.log(this)
    }

    name()
    // 普通滚动
    document.getElementById("nothing").onscroll = function () {
        console.log("普通滚动");
    };

    // 函数节流
    var canRun = true;
    document.getElementById("throttle").onscroll = function () {
          
        if (!canRun) {
            // 判断是否已空闲，如果在执行中，则直接return
            return;
        }
        
        canRun = false;
        setTimeout(function () {
            console.log("函数节流");
            canRun = true;
        }, 300);
    };

    // 函数防抖
    var timer = false;
    document.getElementById("debounce").onscroll = function () {
        clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

        timer = setTimeout(function () {
            console.log("函数防抖");
        }, 300);
    };  

</script>
</html>
节流和防抖

推荐阅读更多精彩内容
