nodeinto

关于js函数节流与函数防抖
有些浏览器事件会被用户在很短的时间内触发很多次,例如点击事件或滚动页面。如果你给窗口滚动事件添加一个事件监听函数(...
扫描右侧二维码阅读全文
01
2018/11

关于js函数节流与函数防抖

有些浏览器事件会被用户在很短的时间内触发很多次,例如点击事件或滚动页面。如果你给窗口滚动事件添加一个事件监听函数(事件句柄),然后用户不停地快速上下滚动页面,那你的事件可能在一秒之内都会被触发很多次,这会导致严重的性能问题,比如说你的页面卡住了(假死),所以我们需要降低触发回调的频率。

下面就说一下优化这种高频执行js的方法,来提高页面速度和性能。

预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新的时间周期。(设置阈值)

函数节流、防抖

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>函数节流、防抖 - 打开控制台,滚动你的鼠标小滑轮试试看</title>
    <style>
        body {
            background: #fff
        }

        h1 {
            font-size: 24px;
            text-align: center;
            line-height: 36px;
            margin-top: 100px;
            font-weight: normal;
            font-family: "微软雅黑"
        }
    </style>
</head>

<body style="height:2000px;">
    <h1>函数节流、防抖</h1>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var isThrottle = true;
    var setTimer = null;
    var throttle = function (fn, time) {
        clearInterval(setTimer)
        var time = time || 300;
        if (isThrottle) { //注意:在这里第一次滚动时候我们是需要立马执行函数的,真正的节流是从第二次开始
            fn();
            isThrottle = false;
            return false;
            /*细节:这里如果你不return false阻断代码往下执行,
            那么在第一次时候实际还会走下面的else,也就是触发了两次*/
        } else {
            setTimer = setTimeout(function () {
                fn();
                console.log(2)
            }, time)
        }
    }

    function aaa() {
        console.log("正在节流中。。。")
    }
    $(document).scroll(function () {
        throttle(aaa, 1000);
    })
</script>

</html>

注意:当你第一次滚动时候,方法不会执行,这当然是属于Bug了,在第一次滚动时候我们应该第一时间执行这个方法,也就是说,真正节流应该是从第二次滚动时候才开始进行,也就是所谓的防抖,它的做法是限制下次函数调用之前必须等待的时间间隔。

Last modification:November 1st, 2018 at 02:36 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment