JS中的防抖与节流

防抖和节流

我们在开发的过程中，经常会有这样一种情况，函数被频繁的调用，如果这个函数执行了某些dom操作的话，那么浏览器将会非常耗费性能，从而影响用户体验

防抖

通过设置定时器保证一段时间内事件回调函数只能执行一次的做法在javascript业界有一个专业的术语称谓——防抖！

原理:
1 用闭包实现一个timer变量，用来保存上一次调用函数的定时器id;
2 我们不是直接调用函数，而是中间需要一个间隔，如果两次调用之间的时间差小于我们传递的值，那么清空上一次的调用值；
3 我们每一次调用的时候都清除一下上一次的调用定时器id，这样就保证了，如果间隔时间小于我们设置的值，那么上一次函数一定不会调用，从而达到了降低调用频率的效果。

    <button id="btn">click</button>
    <script>
        var btn = document.getElementById('btn')
        btn.addEventListener('click', fun(fn))

        function fn(e) {
            console.log('防抖');
        }
        function fun(f) {
            //设置定时器
            var timer
            return function () {
                // 清空上一次的定时器，这一步很重要，意思是如果你上一次点击后，没有
                // 间隔一秒后又点击一次或者很多次，所以定时器没有执行，而且每点击一次就会关闭
                // 上一次点击开启的定时器，从而最后不管你点了多少次，都只会执行一次的效果
                clearTimeout(timer)
                // 使this指向我们的button按钮
                var that = this
                var arg = arguments
                timer = setTimeout(function () {
                    f.apply(that, arg)
                }, 1000)
            }
        }
 </script>

节流

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
主要有两种方式实现：

方法一：时间差，原理就是两次调用之间的时间差小于设置时，那么不调用，反之调用。代码如下：

		var btn = document.getElementById('btn')
        btn.addEventListener('click', fun(fn, 2000))

        function fn(e) {
            console.log('节流');
        }
        
        function fun(fn, time) {
            //上一次调用时间
            var lastTime = new Date().getTime();
            console.log(lastTime);
            //当前调用时间
            var currentTime;
            return function () {
                currentTime = new Date().getTime();
                // 如果点击的时间距离上一次调用的时间间隔大于两秒，那么再次调用
                if (currentTime - lastTime >= time){
                    var that = this;
                    var arg = arguments;
                    lastTime = currentTime;
                    fn.apply(that, arg);
                }
            }
        }

方法二：定时器实现，原理就是设置时间间隔，如果达不到时间间隔，就清除上一次调用回调定时器id。代码如下：

var btn = document.getElementById('btn')
        btn.addEventListener('click', fun(fn, 2000))

        function fn(e) {
            console.log('节流');
        }

        function fun(fn, time) {
            var isRun = true;
            return function () {
                if (isRun) {
                    var that = this;
                    var arg = arguments;
                    isRun = false;
                    setTimeout(() => {
                        fn.apply(that, arg);
                        isRun = true;
                    }, time);
                }
            }
        }