深入理解JS函数节流和去抖动

最新推荐文章于 2025-01-18 07:15:00 发布
转载 最新推荐文章于 2025-01-18 07:15:00 发布 · 405 阅读 · 0
文章标签：

#js #节流 #去抖动

  • 所谓防抖，就是指触发事件后，就是把触发非常频繁的事件合并成一次去执行。即在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。
  • 所谓节流，是指频繁触发事件时，只会在指定的时间段内执行事件回调，即触发事件间隔大于等于指定的时间才会执行回调函数。
  • 类比到生活中的水龙头，拧紧水龙头到某种程度会发现，每隔一段时间，就会有水滴流出
    https://www.cnblogs.com/goloving/p/8672361.html
JavaScript前端高效性能优化策略：防抖和节流的详细介绍
weixin_43312391的博客
01-15 1494
防抖和节流是我们前端开发性能优化中经常用到的一个手段，目的就是为了减少/限制函数执行的频率，用来提升系统性能和用户体验。本篇文章将深入探讨防抖和节流这两种函数优化手段，防抖在函数频繁触发时只在最后一次且规定时间内无再次触发才执行，节流则在给定时间间隔内最多执行一次。有大佬以游戏为喻，将防抖技术形象地比作游戏中的【回城】功能。想象一下，当你按下回城键，角色开始返回基地，但如果在途中被敌人打断，回城动作便会重置，重新开始计算。
前端必会的“防抖”和“节流”方法
m0_67401920的博客
03-09 3226
最近因为疫情隔离居家办公，闲着没事也在回忆和整合学过的知识，这里给大家分享几个有关“防抖”和“节流”方法，希望对大家有所帮助 1 前言 在前端开发过程中，会遇到很多实时输入查询、滚动条触发等业务。而这些频发操作的事件，如果每次触发都进行执行的话，会造成性能下降、后台的压力变大，那么此时就需要使用防抖和节流进行处理。 防抖和节流，见名思义：防抖是防止抖动，节流是节约流量。 2 防抖 防抖(Debounce) 指的是触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。 常见场景：点击按
vue中使用防抖和节流
01-24
vue项目中防抖和节流的指令 在mian.js中use就可以全局使用了
vue 频繁操作使用 防抖和节流
月光恋九霄的博客
02-19 866
防抖和节流 Vue 没有内置支持防抖和节流，但可以使用Lodash等库来实现。 如果某个组件仅使用一次，可以在methods中直接应用防抖： <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script> <script> Vue.createApp({ methods: { // 用 Lodash 的防抖函数 click: _.debounc...
Vue项目中使用防抖和节流
qq_42730111的博客
11-27 2523
之前有接触过闭包这个概念，但是这个直译让人摸不着头脑，而且各种解释又比较繁杂，现在自己实现了一遍才了解到什么是闭包。用java来举个不严谨的栗子，闭包就是：一个private变量，我们可以通过一个公开的方法去访问它。
vue实现防抖、节流
qq156831414的博客
09-30 1592
防抖：指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。节流通常用在比防抖刷新更频繁的场景下，而且大部分是需要涉及动画的操作。场景：input输入时进行查询。节流：指连续触发事件但是在 n 秒中只执行一次函数。场景：按钮点击、下拉加载、鼠标滚动、拖拽动画
Vue中防抖和节流的使用
qq_35191845的博客
03-22 6123
1.防抖。 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 思路：在计时函数前先清除之前触发的倒计时 ，比如执行了两次，在执行第二次的时候会清除第一次的倒计时 ，这样不管触发多少次都只会执行最后一次。 clearsettimeout(this.timer) this.timer=settimeout(()=>{ //代码 },1000) 2.节流。 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。两种方式可以实
js代码-节流函数实现
07-16
本文将深入探讨JavaScript中的节流函数实现，并通过`main.js`中的示例代码进行解析。 节流函数的基本原理是设置一个时间间隔，在这个间隔内，无论函数被调用多少次，都只执行一次。这样可以确保函数不会过于频繁地...
在JavaScript里防止事件函数高频触发和高频调用的方法
10-25
在JavaScript编程中，经常会需要监听用户的动作，比如鼠标点击、键盘输入、页面滚动等事件...同时，对于Underscore.js这类工具库中提供的实用函数，也值得进行系统性的学习和了解，以便在需要时能够快速应用到项目中。
JS中的防抖与节流：你真的掌握了吗？
yan1915766026的博客
01-18 1712
在前端开发的广袤天地中，防抖和节流作为应对高频事件的两大法宝，各自发挥着独特而关键的作用。防抖，犹如一位沉稳的守护者，耐心等待用户操作的尘埃落定，在用户停止触发事件后的特定时刻，精准地执行相应操作。它在搜索框联想、表单提交等场景中表现卓越，能够有效避免因用户频繁操作而引发的不必要请求，极大地减轻服务器的压力，提升系统的整体性能。节流，则像是一位严谨的时间管理者，严格把控事件触发的节奏，确保在一定时间间隔内，相关操作有序地执行一次。
vue 实现防抖和节流
qq_42546463的博客
10-14 4117
日常开发过程中，可能会有监听鼠标移动或者输入框自动提交等需求。这时有个问题，就是会连续触发事件。如果电脑配置差，可能会卡顿，或者这样造成了资源浪费。对于一个资深前端，这是不允许发生的事，因此，debounce（防抖）和throttle（节流）就出现了。 防抖 防抖通俗来讲就是一直触发的事件，在没有触发后一定时间内，重新执行事件处理方法。实现方式可以用setTimeout，话不多说，上代码。 创建utils.js文件，把节流方法放这里， var debounce=(f...
VUE中使用防抖和节流
qq_39251620的博客
04-14 5677
目的：减少请求次数，节省资源 防抖：在事件触发n秒后执行函数，如果在n秒内再次出发，就重新计算 节流：在多次执行某一动作时，限制为每隔一段时间执行一次函数。 防抖: 连续的事件，只需触发一次： eg: 输入框搜索。输完，再发送请求 鼠标的mousemove、mouseover 1,简单封装(不需要传参的情况,setTimeout就可以解决) export const debounce = (fn,delay) => { let timer = null; if(timer){ clearTim
vue项目中的防抖和节流实现方法
weixin_44463883的博客
08-24 894
防抖和节流
Vue中的防抖与节流
qq_45772348的博客
04-08 1187
防抖和节流到底是啥 函数防抖（debounce） 解释：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。 案例：持续触发scroll事件时，并不立即执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发一次handle函数。 function debounce(fn, wait) { let timeout = null return function() { if(timeout !
防抖，节流
m0_64409387的博客
09-20 503
节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。作用： 高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。把 常量 refresh return出来。把 常量 refresh return出来。
vue中的防抖和节流
ASAED的博客
02-28 610
在vue中可以很轻松的实现防抖和节流。}, 500)},watch: {},在这之后每次调用就算执行频率非常的高，内部的回调也只会让你慢慢的！！！！！（缓冲执行）
vue的防抖和节流
qq_42115049的博客
02-25 5016
一、防抖和节流的概念和使用场景 防抖（debounce）：防止重复触发事件，用户在短时间内频繁触发事件时，定时器会不断清空，直到指定时间后才执行回调函数，所以用户在频繁触发事件过程中，只会执行一次回调函数。 使用场景：频繁触发事件，搜索框输入值，监听浏览器窗口resize,表单提交按钮，登录发短信等等 -----------------------------------------------------------------------------------------------------
【Vue】防抖和节流
QAQ
03-28 1426
对于防抖和节流的理解
微信小程序 ec-canvas 雷达图 滑动的时候会抖动
最新发布
04-11
<think>好的，我现在需要帮助用户解决在微信小程序中使用ec-canvas绘制雷达图时出现的滑动抖动问题。首先，我要理解用户的问题场景。用户在使用ec-canvas组件展示雷达图时，当进行滑动操作时，图表出现抖动，这影响了用户体验。我的任务是找到可能的原因并提供解决方案。 首先，我应该回忆一下ec-canvas的基本情况。ec-canvas是ECharts的小程序版本，用于在小程序中绘制图表。雷达图是一种常见的图表类型，通常用于展示多维数据。抖动问题可能涉及性能优化、事件处理或渲染机制等方面。 接下来，我需要考虑可能导致滑动抖动的原因。常见的原因可能包括： 1. **频繁的重绘**：当用户滑动时，可能触发了多次图表的重新渲染，导致性能下降，出现抖动。 2. **事件冲突**：小程序中的touch事件和图表本身的滑动事件可能发生冲突，导致不协调的响应。 3. **渲染帧率不稳定**：由于小程序的单线程架构，如果主线程被阻塞，可能导致渲染帧率下降，出现卡顿或抖动。 4. **Canvas绘制性能问题**：雷达图可能包含复杂的图形和动画，如果绘制过程没有优化，可能导致性能问题。 接下来，我需要针对这些可能的原因逐一分析，并寻找解决方案。 **关于频繁的重绘**：用户可能在滑动时，触发了echarts实例的频繁更新。例如，滑动事件可能不断更新数据或配置，导致图表重新渲染。这时候应该检查代码中是否有不必要的setData调用或图表配置的频繁更改。可以尝试在滑动事件中使用防抖（debounce）或节流（throttle）函数，减少更新频率。 **事件冲突问题**：ec-canvas本身可能处理了部分touch事件，而外层容器的滑动事件可能与之冲突。例如，如果外层scroll-view的滑动和图表内部的touch事件同时触发，可能导致抖动。解决方案可能是在touch事件处理中，判断手势方向，如果是横向滑动则阻止事件冒泡，避免外层容器响应滑动，或者调整事件绑定的顺序和方式。 **渲染性能优化**：小程序的Canvas绘制性能受限于设备，尤其是低端设备。可以考虑以下优化措施： - 减少雷达图的数据点数量，简化图表复杂度。 - 关闭不必要的动画效果，比如设置animation: false。 - 使用纯色填充代替渐变或阴影效果，减少GPU负担。 **使用双Canvas或离屏渲染**：在一些情况下，使用离屏Canvas进行预渲染，然后将结果绘制到主Canvas上，可以提高性能。不过在小程序中，离屏Canvas的支持情况需要查阅文档确认。 另外，参考用户提供的引用链接，虽然引用内容是关于图片剪切工具和Android库，但可能没有直接关联。但可以借鉴其中的思路，比如Cropper库处理触摸控制的优化方法，或者StickyListHeaders的渲染优化策略，可能对事件处理和渲染机制有参考价值。 现在，我需要将这些分析整理成结构化的解决方案，分点说明，确保用户能够逐步实施。同时，需要检查是否有遗漏的可能原因，比如小程序的版本问题，或者ec-canvas的已知bug。建议用户检查官方文档和社区讨论，查看是否有相关的已知问题及修复方法。 最后，生成相关问题，帮助用户深入理解问题并扩展知识，比如性能优化方法、事件处理机制等。</think>### 微信小程序 ec-canvas 雷达图滑动抖动解决方案 #### 1. 事件冲突处理 **现象**：外层容器（如`scroll-view`）滑动与`ec-canvas`的触摸事件产生冲突，导致手势识别异常抖动 **解决方案**： - **禁止事件穿透**：在`ec-canvas`的`touch`事件中通过`catch`绑定代替`bind`，阻止事件冒泡 ```xml <ec-canvas id="radar-chart" canvas-id="radar" bindtouchstart="onTouchStart" bindtouchmove="catchTouchMove" bindtouchend="onTouchEnd" ></ec-canvas> ``` - **方向判断优化**：在`touchmove`事件中判断滑动方向，当检测到横向滑动时主动终止图表交互 ```javascript let startX = 0; function onTouchStart(e) { startX = e.touches[0].clientX; } function onTouchMove(e) { const deltaX = e.touches[0].clientX - startX; if (Math.abs(deltaX) > 10) { return false; // 阻止图表响应横向滑动 } } ``` #### 2. 渲染性能优化 **现象**：雷达图数据量大或动画复杂导致渲染帧率下降 **优化方案**： - **关闭非必要动画**： ```javascript option = { animation: false, // 关闭初始化动画 series: [{ type: 'radar', animationDuration: 0 // 关闭数据更新动画 }] }; ``` - **简化图表元素**： ```javascript option.radar.axisLine.lineStyle = { width: 1 }; // 减少轴线宽度 option.radar.splitLine = { show: false }; // 隐藏分割线 ``` #### 3. 双Canvas绘制策略 **现象**：频繁重绘导致视觉卡顿 **实现方案**： ```javascript // 创建离屏Canvas const offscreenCanvas = wx.createOffscreenCanvas(); // 预渲染逻辑 function preRender() { const ctx = offscreenCanvas.getContext('2d'); // 执行绘制逻辑... } // 主Canvas只进行图像复制 function updateMainCanvas() { const ctx = wx.createCanvasContext('radar'); ctx.drawImage(offscreenCanvas, 0, 0); ctx.draw(); } ``` #### 4. 内存回收机制 ```javascript let chartInstance = null; Page({ onUnload() { if (chartInstance) { chartInstance.dispose(); // 手动销毁ECharts实例 } } }); ``` #### 验证方案 通过微信开发者工具的**性能面板**监控FPS指标，优化后应保持≥50帧（如图1所示）。使用`console.time()`记录关键函数执行时间，确保单次渲染耗时<16ms[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值