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

布满荆棘的人生 2022-09-12 11:48 108阅读 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 条评论，108人围观）

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

相关阅读

相关前端性能优化之函数防抖与截流

函数防抖在前端开发当中，我们都知道有些交互事件，会频繁触发。这样会导致我们的页面渲染性能，如果频繁触发接口调用的话，会直接导致服务器性能的浪费。话不多说，盘它！ ...

港控/mmm°/ 2024年04月18日 19:18/ 0 赞/ 9 阅读

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

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

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

相关 JavaScript：函数防抖与节流

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

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

相关防抖与节流

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

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

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

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

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

相关前端必备-防抖节流

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

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

相关 js网络请求性能优化之防抖与节流

我的博客已经全部迁移至新地址，欢迎收藏我的[个人博客][Link 1]。推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 一丶基本概念防抖(de

电玩女神/ 2022年05月22日 06:12/ 0 赞/ 135 阅读

相关防抖与节流

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

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

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

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

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

相关函数防抖和函数节流

函数节流 > 高频触发事件，在 n 秒内只会执行一次，所以节流会稀释函数执行的频率。举个例子，古时候人们治水，一般都是直接用堵起来的水坝，把水堵住。但是后来发现，堵不如疏

﹏ヽ暗。殇╰゛Y/ 2021年08月26日 13:39/ 0 赞/ 381 阅读