函数节流与函数去抖

Posted moran1992

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了函数节流与函数去抖相关的知识,希望对你有一定的参考价值。

问题由来:

在项目应用PeoplePicker控件的时候突然联想到一个问题,在输入人名时不停的向后台发请求,取到数据库里面的数据。我们都知道频繁的通信会导致页面效率降低。可不可以设置个间隔,每次这个间隔通信一次而不是每次输入一个字符就通信一次呢。其实这里还有很多场景,比如resize事件,scroll事件。都会让一个回调函数不停的执行。页面操作成本是非常高的,如果不停的执行页面效率会打打折损。于是产生了两种解决方案:函数节流、函数去抖。

函数节流:

频繁的调用一个函数,我们可以添加一些限制,可以缓解频繁调用,或者满足某条件才去执行。

代码:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <input id="search" type="text" name="search">
    <script>
        function queryData(text) {
            console.log(text);
        }
        var input = document.getElementById("search");
        var handler = throttle(queryData, 5000);
        input.addEventListener("keyup", function (event) {
            handler(this.value);
        });
        function throttle(fn, delay) {
            var self = this,
                lastTime = 0,
                timer;
            return function (value) {
                var now = new Date().getTime();
                if (now - lastTime <= delay) {
                    return;
                }
                lastTime = now;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    timeout = null;
                    fn.apply(self, [value]);
                }, delay)
            }
        }
    </script>
</body>

</html>

思路:利用闭包函数throttle保存timer以及lastTime,如果两次的调用时间间隔小于设置的规定时间,就不去调用目标函数,如果大于这个时间间隔,就去设置一个timer,然后执行这个函数。这样做的目的可以达到频繁调用函数,但是需要在一段时间才回去执行该函数,这种方式就叫做函数节流。

函数去抖:

去抖可以理解成为是节流的一种情况,在一个条件内函数一直不执行,直到调出该条件。

代码:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <input id="search" type="text" name="search">
    <script>
        function queryData(text) {
            console.log(text);
        }
        var input = document.getElementById("search");
        var handler = debounce(queryData, 5000);
        input.addEventListener("keyup", function (event) {
            handler(this.value);
        });
        function debounce(fn, delay) {
            var timer,
                self = this;
            return function (value) {
                clearTimeout(timer);
                timer = setTimeout(function () {
                    timer = null;
                    fn.apply(self, [value]);
                }, delay);
            };
        }
    </script>
</body>

</html>

思路:函数调用n秒后才会执行,如果函数在n秒内被调用的话,则函数不执行,重新计算执行时间。

总结:函数节流在一定程度上可以优化页面效率,减少没必要的dom渲染以及http请求,更重要的是对js可以有一个更深入的理解。

以上是关于函数节流与函数去抖的主要内容,如果未能解决你的问题,请参考以下文章

函数节流(throttle)与函数去抖(debounce)

函数节流与函数去抖

javascript函数节流(throttle)与函数去抖(debounce)

函数节流和函数去抖

js去抖和节流函数详解

js去抖和节流函数详解