防抖 vue

防抖：

    触发高频事件后n秒内只执行一次，如果n秒内再次触发就会重新计算时间。

   <button class="button" id="buton">按钮</button>

..............................................................

     function showTop() {

            var scrollTop =

                document.body.scrollTop || document.documentElement.scrollTop;

            console.log('你停下了  我要计时喽开始打印了666666666666');

        }

        /* 防抖 */

        function debounce(fn, delay) {

            let timer = null; //借助闭包

            return function() {

                if (timer) {

                    console.log('清除上一个旧的计时器');

                    clearTimeout(timer);

                }

                console.log('设置了新计时器');

                timer = setTimeout(fn, delay); // 简化写法

            };

        }

        var btn1 = document.getElementById('buton');

        btn1.addEventListener('click', debounce(showTop, 000));

防抖  就是相当于，某偶一个点击事件。。。第一次点击以后，闭包中的变量timer   为空，，直接进到计时器中，等待时间（比如等待5秒），并执行即时任务，而且生成了一个计时器的唯一标识，存在了timer中，如果在五秒之内，没有再次触发点击事件，，那就等待五秒后，执行定时器中打印函数就可以了，如果在五秒内再去触发一次点击事件，进到函数中以后，读到了timer是有值的（上一个定时器生成存进去的），所以进到判断中，把第一个定时器的清除了，并且并且重新计算五秒，并且到五秒以后，执行定时器中的函数，又生成了新的一个定时器的唯一标识，，如果在新的五秒之内，又在点击了事件，又会重新进到函数中，读取到第二次中新的定时器的唯一标识，并且清除了定时器，，，又生成第三个定时器的唯一标识，并重新计算五秒，，依次这样子执行，，直到最后一次点击事件(后面五秒之内没有点击事件了)，读取到上一次时器的唯一标识，并且清除了，并且生成新的定时器唯一标识，重新等待五秒，准备执行计时器中的函数（也就是打印函数）

应用场景，  就是搜索框中，一直在输入字，那就不执行函数（如果不防抖，一直输入一直执行搜索函数，那很消耗性能），等待不输入字以后，五秒后，  进行执行 搜索 函数，，（也就是搜索），