防抖 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是有值的(上一个定时器生成存进去的),所以进到判断中,把第一个定时器的清除了,并且并且重新计算五秒,并且到五秒以后,执行定时器中的函数,又生成了新的一个定时器的唯一标识,,如果在新的五秒之内,又在点击了事件,又会重新进到函数中,读取到第二次中新的定时器的唯一标识,并且清除了定时器,,,又生成第三个定时器的唯一标识,并重新计算五秒,,依次这样子执行,,直到最后一次点击事件(后面五秒之内没有点击事件了),读取到上一次时器的唯一标识,并且清除了,并且生成新的定时器唯一标识,重新等待五秒,准备执行计时器中的函数(也就是打印函数)

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM...
    高磊_IT阅读 763评论 0 3
  • 还需要完善的点 TCP/IP五层模型的协议 OSI七层模 -> 应用层下面有表示层和会话层 应用层 // http...
    执凉阅读 364评论 0 0
  • 方便起见不分parameter[形参,出现在函数定义中]和argument[实参,其值为传入函数的值],一律当作a...
    东月三二阅读 401评论 0 0
  • 背景 我18年本科毕业,年前已有换工作想法,一直没有付诸行动,疫情爆发后回到老家,年后开始找工作,对于自己水平不是...
    前前前端小飞阅读 2,291评论 2 38
  • DOM DOM查询 通过domcument对象获取元素节点:getElementById("id"):通过id属性...
    hellomyshadow阅读 358评论 0 0