什么是防抖和节流

1.为什么要使用防抖和节流

有些事件的操作是高频率触发的 但其实触发一次就可以了

防抖和节流就是减少事件发生的频率

2. 防抖的原理

在事件处理函数中添加一个定时器 在定时器中执行代码 延迟一定的时间执行代码

如果你在定时器执行过程中再次触发事件 把原先的定时器清除，再重新定义

 var oDiv = document.getElementsByTagName("div")[0];
        // 1.基础操作
        oDiv.onmousemove = show
        function show() {
            oDiv.innerHTML++;
        }
        // 2.节流减少事件触发的频率
        oDiv.onmousemove = show;
        var timer;//初始值undefined
        function show() {
            // 怎么判断定时器有没有执行完
            if (timer) return;
            timer = setTimeout(function () {
                oDiv.innerHTML++;
                timer = undefined;
            }, 500)
        }

3.节流的原理

在事件处理函数中添加一个延时定时器，延迟一定的时间执行代码

在当前定时器没有完成之前 禁止事件执行 等定时器完成之后再允许事件执行

- 函数封装

```js

 // 3.函数封装
        function throttle(fun, wait) {
            var timer;//初始值undefined
            function show() {
                //怎么判断定时器有没有执行完
                if (timer) return;
                timer = setTimeout(function () {
                    fun();//要做的事情有很多很多 所以放入到一个函数中
                    timer = undefined;
                }, wait)
            }
            return show;
        }
        oDiv.onmousemove = throttle(function () { oDiv.innerHTML++ }, 500)
```