vue js防抖节流

柔光的暖阳◎ 2023-01-08 08:04 205阅读 0赞

防抖  
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间  
防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次

节流  
高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率  
函数节流就是预定一个函数只有在大于等于执行周期是才执行，周期内调用不执行

常用场景:  
防抖: 可以用于鼠标移动确定最后一次的位置, resize改变布局次数过于频繁  
节流: 按钮点击多次 ，search搜索联想，scroll滚动事件

Debounces.js

//节流
    export const Throttle = (fn, t) => { 
        let last;
        let timer;
        let interval = t || 500;
        return function () { 
            let args = arguments;
            let now = +new Date();
            if (last && now - last < interval) { 
                clearTimeout(timer);
                timer = setTimeout(() => { 
                    last = now;
                    fn.apply(this, args);
                }, interval);
            } else { 
                last = now;
                fn.apply(this, args);
            }
        }
    };
    
    //防抖
    export const Debounce = (fn, t) => { 
        let delay = t || 500;
        let timer;
        console.log(fn)
        console.log(typeof fn)
        return function () { 
            let args = arguments;
            if(timer){ 
                clearTimeout(timer);
            }
            timer = setTimeout(() => { 
                timer = null;
                fn.apply(this, args);
            }, delay);
        }
    };

页面调用

<script>
    import { Throttle,Debounce} from '../../js/Debounces.js';
    export default { 
        data(){ 
            return{ 
            }
        },
        methods:{ 
            submit:Debounce(function(data){ 
                console.log(data)
            },1000)
        },
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 防抖、节流

突发奇想，在触发事件的时候，一些会频繁触发的事件会不会造成资源的浪费或者大量的计算造成页面卡顿，比如onresize,onscroll,onmousemove等事件。然后就

川长思鸟来/ 2023年10月11日 12:27/ 0 赞/ 74 阅读

相关防抖、节流

原生js中简单实现： function a() { console.log('触发了！！！') } // 节流：规定的时间内

我会带着你远行/ 2023年07月12日 03:34/ 0 赞/ 92 阅读

相关 js防抖和节流

防抖和节流一般应用于高频事件频繁触发的场景，如窗口大小改变，下拉加载，搜索等，可有效避免事件处理函数被频繁调用造成性能差的问题。一、防抖和节流区别防抖：指定时间内只

客官°小女子只卖身不卖艺/ 2023年06月30日 05:24/ 0 赞/ 5 阅读

相关防抖节流

故心故心故心故心小故冲啊 -------------------- 文章目录防抖节流总结 -------------------- 防抖

r囧r小猫/ 2023年01月12日 11:36/ 0 赞/ 202 阅读

相关 vue js防抖节流

防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次节流

柔光的暖阳◎/ 2023年01月08日 08:04/ 0 赞/ 206 阅读

相关防抖节流

防抖(debounce) 从滚动条监听的例子说起先说一个常见的功能，很多网站会提供这么一个按钮：用于返回顶部。这个按钮只会在滚动到距离顶部一定位置之后才出现，那么我们

叁歲伎倆/ 2022年11月14日 14:41/ 0 赞/ 260 阅读

相关防抖、节流

防抖：只要用户触发事件，清除定时器，重新开始记时，避免全局污染，选择使用闭包实现效果。节流：让用户在一段时间之内，只能执行一次。判断当前的tag，tag是true允许执

╰半橙微兮°/ 2022年09月14日 09:23/ 0 赞/ 257 阅读

相关节流、防抖

节流和防抖主要处理事件处理函数高频调用，减少浏览器负担节流：尽量减少触发次数，mint-ui上封装了一个方法 <script> var t

向右看齐/ 2022年01月30日 00:39/ 0 赞/ 393 阅读

相关防抖节流

通过闭包返回的函数来进行操作,使得变量一直存在防抖: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

不念不忘少年蓝@/ 2021年07月24日 23:49/ 0 赞/ 508 阅读

相关防抖节流

vue代码防抖 // timer用于储存定时器 delayed(){ // 检测定时器 if(this.timer){

妖狐艹你老母/ 2021年07月24日 18:39/ 0 赞/ 526 阅读