微信小程序 - 函数防抖 / 函数节流（轮子封装）

已于 2025-01-16 16:22:50 修改
阅读量788 收藏 2
点赞数 2
分类专栏： + 微信小程序 + 微信小程序开发问题汇总 文章标签： 微信小程序 小程序
于 2024-09-22 16:47:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/142439429
版权

前言

如果你不了解这两个概念，请读完前面，如果你了解，请直接复制代码使用即可。

函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一次。

函数防抖

延迟函数执行。多用于 input 框输入时，显示匹配的输入内容的情况。

函数节流

单位时间 n 秒内，第一次触发函数执行之后不管用户触发多少次都不会执行。

到下一个单位时间 n 秒时，第一次触发函数执行。

多用于页面 scroll 滚动，窗口 resize，防止按钮重复点击等。

源码

支持 Vue2 / Vue3 语法，小程序中使用函数防抖节流一般都将这两种方法封装在公用 js 里。

//common.js

/*函
了解本专栏 订阅专栏 解锁全文
微信小程序防抖 - 实现优化用户体验的前端技巧
IOWEL的博客
09-21 993
通过使用防抖技术，我们可以优化用户体验，提高应用程序的响应速度，并减轻服务器的负载。防抖技术可以减少不必要的事件处理次数，提高应用程序的响应速度，并减轻服务器的负载。通常情况下，当一个事件被触发时，防抖会延迟一段时间，并在该时间段内没有新的触发时执行相应的操作。防抖是一种常用的前端技术，用于优化用户体验，尤其在处理频繁触发的事件时非常有用。在本文中，我们将探讨如何在微信小程序中实现防抖效果，并提供相应的源代码。通过使用防抖函数，我们可以有效地减少搜索请求的次数，提高用户体验。为什么在微信小程序中使用防抖？
微信小程序之使用函数防抖与函数节流
weixin_30709929的博客
05-10 910
函数防抖和函数节流都是老生常谈的问题了。这两种方式都能优化 js 的性能。有些人可能会搞混两个的概念。所以，我以自己的理解，来解释这两个概念的含义。并且列举在小程序中这两个方法的使用。 函数防抖： 英文 debounce 有防反跳的意思，大致就是指防止重复触发。 那么，函数防抖，真正的含义是：延迟函数执行。即不管debounce函数触发了多久，只在最后一次触发debounce函数时，才定...
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
10-16
主要介绍了微信小程序使用函数防抖解决重复点击消耗性能问题实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序：函数节流与函数防抖
qq2844509367的博客
08-15 2602
节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时函数节流与函数防抖节约计算机资源，提升用户体验节流一般是用在必须执行这个动作，但是不能够执行太频繁的情况下防抖一般是用来，用户输入有操作时，暂时不执行动作，等待没有新操作时，进行相应响应函数防抖与节流都可以解决频繁使用计算机资源的问题。
【全局优化】微信小程序全局封装防抖节流函数，让你的程序更加高效流畅
希望看完文章的你能够带着答案离开。
03-22 6120
【全局优化】微信小程序全局封装防抖节流函数，让你的程序更加高效流畅
微信小程序 函数防抖和函数节流
08-18
- *1* [微信小程序 - 函数防抖 / 函数节流（轮子封装）](https://blog.csdn.net/weixin_44198965/article/details/107834833)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...
微信小程序 防抖
m0_63507260的博客
02-14 537
主要我做的是搜索页面 引入 Lin UI gei 下来 git clone https://github.com/TaleLin/lin-ui.git 自己引入搜索组件 /*函数防抖*/ function debounce(fn, interval) { var timer; var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms return function (...
微信小程序：全局封装防抖节流函数
weixin_1095的博客
01-22 1150
防抖节流。
【微信小程序开发】小程序版的防抖节流应该怎么写
Kuroko's Development Notes
02-14 2676
微信小程序开发如何使用防抖节流函数，防抖节流函数TS版怎么写，本文提供现成的方法，以及全面的案例解析。
微信小程序防止多次点击跳转（函数节流）
10-16
主要介绍了微信小程序防止多次点击跳转问题（函数节流）,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序：防止多次点击跳转（函数节流）
03-29
场景 在使用小程序的时候会出现这样一种情况：当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况，就像下图（快速点击了两次）： (此图片来源于网络，如有侵权，请联系删除! ) 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法，就是函数节流(throttle)：函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。 /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null || gapTime == undefined)
微信小程序防抖与节流
最新发布
qq_43577998的博客
12-11 447
定义：防抖的原理是在事件触发后，等待一定时间，如果在这段时间内没有再次触发事件，则执行回调函数。如果事件再次触发，则重新计时。简单来说，防抖会等用户停止操作后再执行函数。应用场景：防抖适用于用户输入类操作，或者需要在用户停止一段时间操作后才执行的场景，比如搜索框的实时查询、窗口大小调整等。示例：防抖用于搜索框输入联想。
微信小程序——swiper抖动问题解决以及节流、防抖
wct040923的博客
07-20 3319
前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。
微信小程序 用函数实现 防抖 和 节流
Your_is_my_God的博客
09-19 363
1、百度搜索防抖和节流的含义，理解其意义 2、了解小程序和其js封装位置 3、在其根目录utils下创建 tool.js /*函数节流*/ function throttle(fn, interval) { var enterTime = 0;//触发的时间 var gapTime = interval || 300 ;//间隔时间，如果interval不传，则默认300ms return function() { var context = this; var bac.
【小程序】节流函数与防抖函数
zxsy19966的博客
10-10 501
wx小程序节流与防抖函数的this指向不定？快来看看这篇文章吧~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值