防抖和节流最简单的写法，简单易懂，注释清晰！

1.所谓节流就是事件在n秒内连续被触发多次，函数只执行一次。

2.所谓防抖就是事件被触发，n秒后执行一次函数，如果n秒内再次被触发，就重新计算时间。

3.废话不多说先上代码。

<div></div>
    <script>
        let num = 1;
        let div = document.getElementsByTagName("div")[0];

        function numChange() {
            div.innerHTML = num++;
        }
        // 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
        function debounce(callback, time) {
            let timer;
            return function () {
                let context = this;
                let args = arguments;

                if (timer) {
                    clearTimeout(timer);
                }


                timer = setTimeout(() => {
                    callback.apply(context, args)
                }, time);
            }
        }
        // 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。
        function throttle(callback, time) {
            let timer;
            return function () {
                let context = this;
                let args = arguments;
                if (!timer) {
                    timer = setTimeout(() => {
                        timer = null;
                        callback.apply(context, args)
                    }, time)
                }

            }
        }
        // 调用方法
        // 鼠标动的越快，事件触发的频率越高
        // div.onmousemove = numChange;
        // 事件触发了n秒后，函数执行一次，n秒内事件再次被触发，时间将会重新计算
        // div.onmousemove = debounce(numChange, 100);
        // 在n秒内连续触发事件，只执行一次
        div.onmousemove = throttle(numChange, 1000);
    </script>