防抖 vue

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

按钮

…

 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); // 简化写法

        };

    }

    // window.onscroll = debounce(showTop, 3000);

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

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

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

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