微信小程序:函数节流与函数防抖
目录
问题引入:
定义
解决方案:函数节流
一、案例举例
1.页面展示
2.search.wxml标签展示
3.search.js展示
4.结果展示
二、函数节流解决问题
1.函数
2.实例应用
三、函数防抖解决问题
1.函数
2.原理
3.应用场景
4.应用实例
总结
问题引入:
在搜索框中,程序短时间内大量触发某函数而导致的性能下降。
定义
- 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
- 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
解决方案:函数节流
- 函数节流: 频繁触发,但只在特定的时间内才执行一次代码
- 函数防抖: 频繁触发,但只在特定的时间内没有触发执行条件才执行一次代码
一、案例举例
1.页面展示

2.search.wxml标签展示
<input type="text" bindinput="handleInputChange" />
3.search.js展示
handleInputChange(event){console.log(event.detail.value)
}
4.结果展示

二、函数节流解决问题
1.函数
setTimeout(() => {}, 300);
2.实例应用
//全局变量
let isSend = false;
// input 输入框
handleInputChange(event) {console.log(event.detail.value)this.setData({searchContent: event.detail.value.trim()});// 函数节流 防抖if (isSend) {return}isSend = truethis.getSearchList()setTimeout(async () => {isSend = false}, 300);},
//请求方法
async getSearchList() {let searchListData = await request('/search', { keywords: this.data.searchContent, limit: 10 })this.setData({searchList: searchListData.result.songs})},
三、函数防抖解决问题
1.函数
debounce: function (func, wait) {return () => {clearTimeout(timer);timer = setTimeout(func, wait);};};
func:需要防抖的函数;
wait:number类型,setTimeout的时间参数;
2.原理
防抖的原理就是:你尽管触发事件,但是我一定在事件触发n秒无操作后才执行
3.应用场景
- 表单验证
- 搜索框输入查询
- 滚动条滚动
- 按键提交
4.应用实例
function debounce(fn, interval) {let timer;let delay = interval || 500; // 间隔的时间,如果interval不传,则默认1秒return function () {let that = this;let args = arguments; // 保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。if (timer) {clearTimeout(timer);}timer = setTimeout(function () {fn.apply(that, args); // 用apply指向调用debounce的对象,相当于this.fn(args);}, delay);};
}
总结
- 函数节流与函数防抖节约计算机资源,提升用户体验
- 节流一般是用在必须执行这个动作,但是不能够执行太频繁的情况下
- 防抖一般是用来,用户输入有操作时,暂时不执行动作,等待没有新操作时,进行相应响应
- 函数防抖与节流都可以解决频繁使用计算机资源的问题
相关文章:
微信小程序:函数节流与函数防抖
目录 问题引入: 定义 解决方案:函数节流 一、案例举例 1.页面展示 2.search.wxml标签展示 3.search.js展示 4.结果展示 二、函数节流解决问题 1.函数 2.实例应用 三、函数防抖解决问题 1.函数 2.原理 3.应用场景 4.应用实例 总结 问题引入…...
Mathematica(42)-计算N个数值的和
比如,我们要用Mathematica求得到下面的式子: 这就需要用到一个函数:Sum 具体地,Sum函数的使用形式如下: 因此,按照公式就可以得到下面的结果: 如果,我们想要将求和号也加进去&#…...
安装和配置 Ansible
安装和配置 Ansible 按照下方所述,在控制节点 control.area12.example.com 上安装和配置 Ansible: 安装所需的软件包 创建名为 /home/curtis/ansible/inventory 的静态清单文件,以满足以下要求: node1 是 dev 主机组的成员 node2 …...
电脑系统重装日记
重装原因 电脑C盘几乎爆炸故重装系统一清二白 此片原因 记录重装过程,强调一些要注意的点,以防日后重装。 重装过程 1.清空电脑文件后重启,电脑冒蓝光,一直蓝屏反复重启,故只能重装系统以解难题。 2.准备一个U盘&…...
通讯协议044——全网独有的OPC HDA知识一之聚合(十二)持续坏值时间
本文简单介绍OPC HDA规范的基本概念,更多通信资源请登录网信智汇(wangxinzhihui.com)。 本节旨在详细说明HDA聚合的要求和性能。其目的是使HDA聚合标准化,以便HDA客户端能够可靠地预测聚合计算的结果并理解其含义。如果用户需要聚合中的自定义功能&…...
Docker:Windows container和Linux container
点击"Switch to Windows containers"菜单时: 提示 然后 实际上是运行:com.docker.admin.exe start-service...
excel提示更新外部引用文件 这个提示能手动禁用
是的,你可以手动禁用 Excel 中的更新外部引用文件的提示。这些步骤可能因 Excel 版本而有所不同,以下是一般的步骤: 1. **打开 Excel**: 2. **进入“选项”**: - 在 Excel 中,点击顶部菜单中的“文件”…...
2023 最新 小丫软件库app开源源码 PHP后端
上传了源码解压之后,在admin/public/config.php修改后台登录账号和密码 后台地址:域名或者ip/admin 然后自己修改配置即可 后端搭建完成,现在导入iapp源码 导入iapp源码之后,修改mian.iyu载入事件的对接api和url就可以打包了 sss …...
Selenium 测试用例编写
编写Selenium测试用例就是模拟用户在浏览器上的一系列操作,通过脚本来完成自动化测试。 编写测试用例的优势: 开源,免费。 支持多种浏览器 IE,Firefox,Chrome,Safari。 支持多平台 Windows,Li…...
es自定义分词器支持数字字母分词,中文分词器jieba支持添加禁用词和扩展词典
自定义分析器,分词器 PUT http://xxx.xxx.xxx.xxx:9200/test_index/ {"settings": {"analysis": {"analyzer": {"char_test_analyzer": {"tokenizer": "char_test_tokenizer","filter": [&…...
基于libevent的tcp服务器
libevent使用教程_evutil_make_socket_nonblocking_易方达蓝筹的博客-CSDN博客 一、准备 centos7下安装libevent库 yum install libevent yum install -y libevent-devel 二、代码 server.cpp /** You need libevent2 to compile this piece of code Please see: http://li…...
【TypeScript】tsc -v 报错 —— 在此系统上禁止运行脚本
在 VS Code 终端中执行 tsc -v ,报错 —— 在此系统上禁止运行脚本 然后 windows x ,打开终端管理员,出现同样的问题 解决方法: 终端(管理员)执行以下命令: 出现 RemoteSigned 则代表更改成功…...
【C++】STL---list
STL---list 一、list 的介绍二、list 的模拟实现1. list 节点类2. list 迭代器类(1)前置(2)后置(3)前置- -、后置- -(4)! 和 运算符重载(5)* 解引用重载 和 …...
六、分组背包
六、分组背包 题记算法题目代码 题记 一个旅行者有一个最多能装V公斤的背包和有N件物品,它们的重量分别是W[1],W[2],…,W[n],它们的价值分别为C[1],C[2],…,C[n]。这些物品被划分为若干组,每组中的物品互相冲突&#…...
LangChain入门:构建LLM驱动的应用程序的初学者指南
LangChain & DemoGPT 一、介绍 你有没有想过如何使用大型语言模型(LLM)构建强大的应用程序?或者,也许您正在寻找一种简化的方式来开发这些应用程序?那么你来对地方了!本指南将向您介绍LangChain&#x…...
gitlab修改远程仓库地址
目录 背景: 解决: 1.删除本地仓库关联的远程地址,添加新的远程仓库地址 2.直接修改本地仓库关联的远程仓库地址 3.打开.git隐藏文件修改远程仓库地址 4.拉取代码报错(git host key verification failed) 背景: 公司搬家&#…...
VB+SQL自动点歌系统设计与实现
摘 要 随着社会的发展,人类的进步,21世纪人们的生活的水平有所提高,为了满足人们对生活的需要,丰富业余生活,就需要有一些娱乐的设施来弥补这些空缺,所以开发了自动点歌系统。 论文详细论述了系统总体设计思想、数据库设计以及功能模块设计等,给出了自动点歌系统一般流程…...
设计模式之适配器模式(Adapter)的C++实现
1、适配器模式的提出 在软件功能开发中,由于使用环境的改变,之前一些类的旧接口放在新环境的功能模块中不再适用。如何使旧接口能适用于新的环境?适配器可以解决此类问题。适配器模式:通过增加一个适配器类,在适配器接…...
C#系统锁屏事件例子 - 开源研究系列文章
今天有个网友问了个关于操作系统锁屏的问题。 我们知道,操作系统是基于消息和事件处理的,所以我们只要找到该操作系统锁屏和解屏的那个事件,然后在事件里进行处理即可。下面是例子介绍。 1、 项目目录; 下面是项目目录:…...
R语言实现免疫浸润分析(2)
原始数据承接免疫浸润分析(1),下面展示免疫浸润结果: #直接使用IOBR包内的cell_bar_plot pic<-cell_bar_plot(input quantiseq_immo_de[1:20,], title "quanTiseq Cell Fraction") #使用ggplot2 library(ggplot2)…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时,需结合业务场景设计数据流转链路,重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点: 一、核心对接场景与目标 商品数据同步 场景:将1688商品信息…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
Linux-07 ubuntu 的 chrome 启动不了
文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了,报错如下四、启动不了,解决如下 总结 问题原因 在应用中可以看到chrome,但是打不开(说明:原来的ubuntu系统出问题了,这个是备用的硬盘&a…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
