手写系列，一:防抖节流（立即执行/非立即执行）

 里面用了闭包的知识点

<div id="test" style="height:500px;border: 1px solid black;">123</div>
    <script>
        window.onload = function () {
            var dom = document.getElementById("test")
            dom.onmousemove = debounce(function () { console.log(1) }, 1, true)
        }

        // 防抖, 立即执行和延迟执行
        function debounce(fn, time, atOnece) {
            var timer = null, atOnece = atOnece || false
            return function () {
                if(atOnece) {fn();atOnece=false}
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(() => {
                    fn()
                }, time * 1000)
            }
        }

        // 节流
        function throttle(fn, time) {
            var timer = null
            return function() {
                if(timer) return;
                timer = setTimeout(() => { fn();timer=null }, time * 1000)
            }
        }

    </script>

 

下面的两个都是立即执行版：

// debounce 防抖
        function debounce (fn,immediate) {
            var timer;
            return function() {
                if(timer)  clearTimeout(timer);
                immediate && !timer && fn();  // 首次进入，立即执行（立即执行开启，定时器没开启）
                timer = setTimeout(() => {
                    timer = null;
                }, 1000)
            }
        }

        // throttling 节流
        function throttling(fn,immediate) {
            var timer;
            return function () {
                if (timer) return false;
                !timer && immediate && fn();
                timer = setTimeout(() => {
                    timer = null;
                }, 1000)
            }
        }

        document.getElementById("btn").onclick = throttling(function () {
            console.log(1)
        },true)

总结： 可以发现防抖节流的区别在于  一开始的判断定时器存在所做的处理，防抖是清除定时器重新来，节流是 return false 等待定时器自动清除。