vue js防抖节流

柔光的暖阳◎ 2023-01-08 08:04 290阅读 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 条评论，290人围观）

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

相关阅读

相关 js 防抖、节流

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

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

相关 js防抖和节流

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

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

相关 js函数防抖节流

一、什么是函数防抖概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间

柔光的暖阳◎/ 2023年02月20日 05:58/ 0 赞/ 36 阅读

相关 js 防抖和节流

防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 // 防抖函数 const debounce = (fn, delay) => \{

系统管理员/ 2023年02月18日 05:25/ 0 赞/ 38 阅读

相关防抖节流

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

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

相关 vue js防抖节流

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

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

相关防抖、节流

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

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

相关节流、防抖

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

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

相关防抖节流

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

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

相关防抖节流

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

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