前端性能优化07_函数防抖与节流

布满荆棘的人生 2022-09-12 11:48 173阅读 0赞

### 函数防抖(debounce) ###

概念： 在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

生活中的实例：电脑无操作1分钟之内如果没有操作会进入休眠，当第40秒时鼠标被移动一下，重新计时1分钟。

实现：定时器。

应用：搜索时等用户完整输入内容后再发送查询请求。

let inputNode = document.getElementById('user_input');
      let timer;
      inputNode.addEventListener('keyup',function () { 
        let value = inputNode.value;
        if(timer){ 
          clearTimeout(timer);
        }
        timer = setTimeout(()=>{ 
          sendAjax(value);
        },300)   // 防抖时间一般设置为200ms-300ms 
      })
      
      function sendAjax(data) { 
        console.log(`发送了一次Ajax请求，内容为${ data}`);
      }

### 函数节流(throttle) ###

概念： 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

生活中的实例：fps游戏，鼠标按住不松手，子弹也不会连成一条线。

实现：定时器 + 标识

应用：在鼠标滚轮滚动的时候，每隔2秒钟，打印一次

// 函数节流的实现;
      let canLog = true;
      document.body.onscroll = function () { 
        if(canLog){ 
          console.log(1);
          canLog = false;
          setTimeout(()=>{ 
            canLog = true;
          },2000)
        }
      }

发表评论取消回复

表情：

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

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

相关阅读

相关前端性能优化之防抖&节流

前端性能优化之防抖&节流 1.什么是防抖和节流 2.代码实现 2.1 实现防抖 2.2 实现节流 3.应用场景 3

太过爱你忘了你带给我的痛/ 2023年10月16日 18:03/ 0 赞/ 79 阅读

相关函数防抖节流

采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在

ゝ一世哀愁。/ 2023年10月12日 08:09/ 0 赞/ 41 阅读

相关前端JS防抖与节流

前言：防抖与节流是前端常用的优化方案，基本概念懂的都懂，不再多说。下面看一下实现方法一、防抖应用场景：常见于按钮点击或者一些不算高频触发的事件 <

浅浅的花香味﹌/ 2023年10月01日 09:05/ 0 赞/ 40 阅读

相关前端函数防抖和节流

防抖：触发事件后在n秒内函数只执行一次，若在n秒内再次触发则重新计算下次函数响应时间节流：连续发生的事件在n秒内只执行一次使用场景：即时查询等需要短时间内请求到服务器端

约定不等于承诺〃/ 2023年07月18日 14:26/ 0 赞/ 3 阅读

相关 JavaScript：函数防抖与节流

什么是函数防抖与节流？函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。定义：防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

客官°小女子只卖身不卖艺/ 2022年10月09日 00:40/ 0 赞/ 211 阅读

相关防抖与节流

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

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

相关前端性能优化07_函数防抖与节流

函数防抖(debounce) 概念：在事件被触发n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。生活中的实例：电脑无操作1分钟之内如果没有操作会进入休眠，

布满荆棘的人生/ 2022年09月12日 11:48/ 0 赞/ 174 阅读

相关前端必备-防抖节流

文章目录前端必备-防抖节流前端必备-防抖节流防抖节流—优化思想 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

怼烎@/ 2022年08月29日 11:58/ 0 赞/ 156 阅读

相关防抖与节流

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

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

相关页面优化之高性能函数防抖与节流

一.函数节流（throttle）函数节流是指一定时间内js方法只跑一次。 1.函数节流的目的例如，DOM 操作比起非DOM 交互需要更多的内存和CPU时间。连

悠悠/ 2021年09月14日 20:56/ 0 赞/ 288 阅读