函数去抖（debounce）和函数节流（throttle）

2018-10-12

前言

在开发过程中会遇到频率很高的事件或者连续的事件，如果不进行性能的优化，就可能会出现页面卡顿的现象。函数去抖（debounce）和函数节流（throttle）其实就是函数调用频率的控制器。

一、使用场景

throttle 应用场景

函数节流有哪些应用场景？哪些时候我们需要间隔一定时间触发回调来控制函数调用频率？

DOM 元素的拖拽功能实现（mousemove）
射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
计算鼠标移动的距离（mousemove）
Canvas 模拟画板功能（mousemove）
搜索联想（keyup）
监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

debounce 应用场景

函数去抖有哪些应用场景？哪些时候对于连续的事件响应我们只需要执行一次回调？

每次 resize/scroll 触发统计事件
文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

二、认识函数去抖（debounce）和函数节流（throttle）

throttle 等时间间隔执行函数。
debounce 时间间隔 t 内若再次触发事件，则重新计时，直到停止时间大于或等于 t 才执行函数。

三、简单实现

1.函数去抖

function debounce(fn, delay) {
    var timer = null;
    return function () {
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args)
        }, delay)
    }
}

2.函数节流

function throttle(fn, threshhold) {
    var last;
    var timer;
    threshhold || (threshhold = 250)
    return function () {
        var context = this;
        var args = arguments;
        var now = +new Date();
        if (last && now < last + threshhold) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(context, args);
            }, threshhold)
         } else {
             last = now;
             fn.apply(context, args);
         }
    }
}

四、总结

1.mousemove事件案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>Try moving your mouse...</h3>
<p class="normal">Normal `mousemove` count:
    <span class="count">0</span>
</p>
<p class="debounced">Debounced `mousemove` count:
    <span class="count">0</span>
</p>
<p class="throttled">Throttled `mousemove` count:
    <span class="count">0</span>
</p>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
    $(function () {
        var normalCount = 0
        var debouncedCount = 0
        var throttledCount = 0

        $(document).on('mousemove', function(e) {
            $('.normal .count').text(++normalCount)
        })

        $(document).on('mousemove', debounce(function(e) {
            $('.debounced .count').text(++debouncedCount)
        }, 250))

        $(document).on('mousemove', throttle(function(e) {
            $('.throttled .count').text(++throttledCount)
        }, 250))

        $(document).on('mouseleave', function(e) {
            normalCount = 0
            debouncedCount = 0
            throttledCount = 0
            $('.count').text(0)
        })
      
        function debounce(fn, delay) {
            var timer = null
            return function () {
                var context = this
                var args = arguments
                clearTimeout(timer)
                timer = setTimeout(function () {
                    fn.apply(context, args)
                }, delay)
            }
        }

        function throttle(fn, threshhold) {
            var last
            var timer
            threshhold || (threshhold = 250)

            return function () {
                var context = this
                var args = arguments

                var now = +new Date()

                if (last && now < last + threshhold) {
                    clearTimeout(timer)
                    timer = setTimeout(function () {
                        last = now
                        fn.apply(context, args)
                    }, threshhold)
                } else {
                    last = now
                    fn.apply(context, args)
                }
            }
        }
    })
</script>
</body>
</html>

参考链接：

https://www.cnblogs.com/shoestrong/p/6538783.html