美文网首页
节流 vue

节流 vue

作者: 方_圆 | 来源:发表于2022-04-01 17:33 被阅读0次

    节流:

        触发高频事件后n秒内只执行一次,所以节流会稀释函数的执行频率。n秒内再次触发也不会执行

     // 相当于人进大门; 

     function throttle(fn, delay) {

                let open = true; //进来就设置门开状态

                return function() {

                    if (open == true) {

                        //门开,进来一个人,马上锁住。定时任务没执行,门的状态一直锁着

                        open = false;

                        setTimeout(() => {

                            fn();

                            open = true; //定时任务执行,门的状态变为打开,可以再次进来人,,,进来以后在锁着如此循环

                        }, delay);

                    }

                };

            }

      window.onscroll = throttle(showTop, 5000);

       function showTop() {

                var scrollTop =

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

                console.log('滚动条位置:' + scrollTop);

            }

    相当于第一个人,门开着,进去了,,,然后迅速关上门,变量改为关(闭包函数中的open为false),定时器还没有执行,,第二个人进来通过读取闭包函数的变量(闭包函数中的open为false),,,来查看门的状态  是关着的,然后一直再来人  一直是这样(就一直不能执行定时器中函数),直到计时器到达时间,开始工作  把门的状态打开(闭包函数中的open为true),进来人。。再将门的状态改为关闭,定时器又在记录时间还没有到执行时间,后面的人通过读取闭包函数的变量,,,来查看门的状态 是关着的(闭包函数中的open为false),然后一直再来人  一直是这样。。。。。。。。。。。。。

    应用场景,  就是提交表单按钮,第一下提交以后,就去执行提交函数(如果不节流,一直点击一直执行提交函数,那很不符合设计,消耗性能),等待五秒后,再点击  ,在进行执行提交函数,

    相关文章

      网友评论

          本文标题:节流 vue

          本文链接:https://www.haomeiwen.com/subject/plknjrtx.html