手写防抖与节流

红太狼 2022-10-12 12:59 187阅读 0赞

### 概念介绍 ###

** 防抖：高频输入时，定时器时间间隔内将只执行一次函数，如果后续再次输入触发函数，将会重置这个定时间隔时间，并且延后触发**

**例如：间隔为500ms，在第350ms的瞬间再次触发，那么最后打印防抖成功的时间大概是350ms+500ms=850ms**

**节流：高频输入时，定时器时间间隔内将只执行一次函数，如果后续再次输入触发函数，将不会重置这个定时间隔时间， 会依照每个时间间隔执行一次，**

**例如：间隔为500ms，在4秒内连续输入20个字符，触发20次函数，将只打印4s=4000ms，4000ms/500ms=8次**

### **下面展示例子：** ###

**防抖debounce：**

function debounce(fn) {
        let timeout = null;
        // 创建一个标记用来存放定时器的返回值
        return function() {
          clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
          timeout = setTimeout(() => {
            // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
            fn.apply(this, arguments);
          }, 500);
        };
      }
      function sayHi() {
        console.log('防抖成功');
      }

<input id="inp" style={
       { width: 500, height: 300, position: 'absolute' }} onInput={debounce(sayHi)} />

**节流throttle：**

function throttle(fn) { 
        let canRun = true; // 通过闭包保存一个标记 
        return function () { 
          if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return 
          canRun = false; // 立即设置为false 
          setTimeout(() => { // 将外部传入的函数的执行放在setTimeout中 
            fn.apply(this, arguments); // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉 
            canRun = true; 
          }, 500); 
        }; 
      } 
      function sayHello(e) { 
        console.log('节流成功'); 
      }

<input id="inp1" style={
       { width: 500, height: 500, position: 'absolute' }} onInput={throttle(sayHello)} />

发表评论取消回复

表情：

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

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

相关阅读

相关手写防抖节流

文章目录手写前端常用技巧-防抖节流防抖节流 1. 首节流 2. 尾节流 3. 首尾节流总结 --

拼搏现实的明天。/ 2023年10月02日 11:06/ 0 赞/ 27 阅读

相关防抖节流

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

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

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

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

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

相关手写防抖与节流

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

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

相关防抖与节流

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

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

相关防抖、节流

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

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

相关手写函数防抖节流

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

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

相关节流、防抖

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

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

相关防抖与节流

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

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

相关防抖节流

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

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