从零开始学JavaScript-----防抖和节流（debounce和throttle）

防抖：事件在函数执行过程中只执行了一次

防抖分为两种：立即执行和非立即执行

立即执行：事件一触发就执行一次，在函数执行的时间段，不在触发事件，如果触发，这个时间段无效

非立即执行：事件触发后，在函数最后的时间执行一次

防抖（使用了闭包和定时器）

防抖的缺点：事件在不断被触发的时间段里，函数不会执行

下面是一段防抖的代码

 <h1>0</h1>
    <script>
        let h1 = document.querySelector('h1');
        let n = 0;
        function fn() {
            n++;
            h1.innerText = n;
        }

        function debounce(fun, wait, ele) {
            let timer//引用闭包防止全局污染
            if (ele) {
                     //立即执行
                return function () {
                    let flag = !timer
                    if (timer) {
                        clearTimeout(timer)
                    }
                    timer = setTimeout(function () {
                        timer = null
                    }, wait)
                    if (flag) {
                        fun()
                    }
                }
            } else {
                非立即执行
                return function () {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    timer = setTimeout(fun, wait)
                }
            }
        }

        let v = debounce(fn, 1000, true)
        document.onmousemove = v;

节流：节流是在函数执行过程中只执行一次

节流也分为立即执行和非立即执行

立即执行（用的时间戳方式）

非立即执行（用的定时器方式）

节流的立即执行：事件一触发就发生变化，然后每隔一段时间发生变化

节流的非立即执行：事件触发后函数执行最后一次发生变化，每隔一段时间发生变化

节流的缺点：事件不断被触发的过程中，在指定的时间间隔内，执行一次函数

下面是一段节流的代码

 <h1>0</h1>

    <script>
        var h1 = document.querySelector('h1');
        var n = 0;
        function fn() {
            n++;
            h1.innerText = n;
        }

        // 节流throttle
        // 节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。可以通过时间戳、定时器两种方式实现。

        // 时间戳方式(立即执行)
        // 事件会立即执行，并且间隔 1 秒执行 1 次
        function throttle(fun, wait) {
            var prev = 0;
            return function () {
                var now = Date.now(); // 当前的时间戳
                if (now - prev > wait) {
                    fun();
                    prev = now;
                }
            }
        }
        var v = throttle(fn, 1000);
        document.onmousemove = v;

        // -----------------------------------
        // 定时器方式（延迟执行）
        // 事件会1秒后执行，并且间隔 1 秒执行 1 次
        function throttle(fun, wait) {
            var timer;
            return function () {
                if (!timer) {
                    timer = setTimeout(function () {
                        fun();
                        timer = null;
                    }, wait)
                }
            }
        }
        var v = throttle(fn, 1000);
        document.onmousemove = v;
    </script>