函数抖动和函数节流 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数去抖和函数节流</title>
    <script src="js/jquery-3.0.0.js"></script>
    <script src="js/lodash.min.js"></script>
    <style>
        .test_throttle{
            width: 200px;
            height: 400px;
            font-size: 20px;
            line-height: 38px;
            text-align: justify;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<p>函数去抖：用户在input输入情况下，当停止输入500毫秒后才执行，并不是每次 输入都执行</p>
<p>函数节流：一个函数的调用频率，限制1s内一个函数不能被调用两次。</p>
<input type="text" class="test_debounce">
<p class="test_throttle">测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流测试函数节流</p>
<script>
    $(function () {
        var n=1;
        $('.test_debounce').on('input change',
            _.debounce(function() {
                n++;
                console.log(n);
            },500)
        )
        // 函数节流
        $('.test_throttle').on('scroll',_.throttle(
            function () {
                n++;
                console.log(n);
            },10000)
        )

    })
</script>
</body>
</html>

 

posted @ 2019-04-02 09:31  盖大楼  阅读(148)  评论(0)    收藏  举报