解决抖动之函数防抖

函数的抖动：简单来说就是一个函数在短时间内大量频繁调用，但是很多次调用都不是必须的

在js中，哪些情况容易遇到抖动？

到底哪些事件会频繁调用？

鼠标移动事件

移入移出事件

input输入事件

滚动条滚动事件(onscroll)

尺寸改变事件(onresize)

…

而很多次函数其实没必要调用，他都是无效执行，所以要想办法解决;

解决抖动之防抖

防抖：就是防止函数内的代码在短时间内大量执行，只让它最终执行一次

步骤：

把要执行的代码包到setTimeout里

在短时间内大量调用函数的时候，先把上一次的计时器清掉，再开一个新的，这样就能保证短时间内大量调用函数时，代码不会被执行（因为在不断的刷新计时器）

只有当你停下来一段时间，计时器才会执行

let timerID = null;

        document.body.onscroll = function () {

            clearTimeout(timerID)

            // 把要执行的代码打包到计时器里

            timerID = setTimeout(() => {

                console.log('滚动了');

            }, 300); //0.5秒

        }

封装成函数

function fangdou(callback, time) {

            //因为这个函数内部需要用到timerID，所以应该吧timerID

            //声明就写到函数内部，所以写成了闭包

            let timerID = null;

            return function () {

                clearTimeout(timerID)

                // 把要执行的代码打包到计时器里

                timerID = setTimeout(callback, time); //time时间后调用callback函数

            }

        }