手撕代码 — 防抖与节流

快来打我* 2022-12-27 09:26 73阅读 0赞

**防抖**

> 防抖是在触发事件的n秒之后才会执行函数，触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

> **应用场景**

*  按钮点击事件
 *  input事件
 *  手机号验证
 *  防止用户多次重复提交
 *  …

//每次触发事件时都取消之前的延时调用方法
    const debounce = (func, time) => { 
        if (typeof func !== 'function') { 
            throw new TypeError('Expected a function')
        }
        const wait = +time || 500
        let timeout = null
        return function () { 
            clearTimeout(timeout);
            timeout = setTimeout(() => { 
                console.log(arguments);
                func.apply(this, arguments);
            }, wait);
        };
    }

**节流**

> 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

> **应用场景**

*  判断页面滚动加载
 *  高频发送请求
 *  …

//每次触发事件时都判断当前是否有等待执行的延时函数
    const throttle = (func, time) => { 
        if (typeof func !== 'function') { 
            throw new TypeError('Expected a function')
        }
        const wait = +time || 500
        let canRun = true;
        return function () { 
            if (!canRun) return;
            canRun = false;
            func.apply(this, arguments);
            setTimeout(() => { 
                canRun = true;
            }, wait);
        };
    }

> 注意点：使用call或者apply改变保证this指向

下图(`非原创`)能很清楚的演示在 mousemove 情况下

防抖（`debounce`）和节流（`throttle`）表现上的差异。  
![eb3cedfeb8f8055584a9ee83b46d3143.gif][]

[eb3cedfeb8f8055584a9ee83b46d3143.gif]: /images/20221120/2f41039926cc4301bd604e3e6e25ee93.png

发表评论取消回复

表情：

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

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

相关阅读

相关手撕代码 — 防抖与节流

防抖 > 防抖是在触发事件的n秒之后才会执行函数，触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 > 应用场景按钮点击事件

快来打我*/ 2022年12月27日 09:26/ 0 赞/ 74 阅读

相关防抖节流

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

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

相关手写防抖与节流

概念介绍防抖：高频输入时，定时器时间间隔内将只执行一次函数，如果后续再次输入触发函数，将会重置这个定时间隔时间，并且延后触发例如：间隔为500ms，在第350ms

红太狼/ 2022年10月12日 12:59/ 0 赞/ 141 阅读

相关防抖与节流

防抖与节流防抖函数防抖的应用场景节流函数节流的应用场景在实际开发中，我们会遇到这么一个场景：我们需要注册

╰半橙微兮°/ 2022年09月16日 11:19/ 0 赞/ 151 阅读

相关防抖、节流

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

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

相关手写函数防抖节流

DOM 0级事件 <style> .demo{width:200px;height:200px;border:1px solid red;overfl

系统管理员/ 2022年03月27日 06:52/ 0 赞/ 217 阅读

相关节流、防抖

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

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

相关防抖与节流

防抖：是指一段时间内，没有再触发事件，就执行这个事件；如果一段时间内又触发了这个时间，则清空已经间隔的时间，重新开始计时，等待事件触发。场景：搜索框输入关键字，实时请求后台

女爷i/ 2022年01月18日 22:55/ 0 赞/ 235 阅读

相关防抖节流

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

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

相关防抖节流

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

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