当前位置: 首页 > news >正文

微信小程序:函数节流与函数防抖

目录

问题引入:

定义

解决方案:函数节流

一、案例举例

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);};
}

总结

  • 函数节流与函数防抖节约计算机资源,提升用户体验
  • 节流一般是用在必须执行这个动作,但是不能够执行太频繁的情况下
  • 防抖一般是用来,用户输入有操作时,暂时不执行动作,等待没有新操作时,进行相应响应
  • 函数防抖与节流都可以解决频繁使用计算机资源的问题

相关文章:

微信小程序:函数节流与函数防抖

目录 问题引入&#xff1a; 定义 解决方案&#xff1a;函数节流 一、案例举例 1.页面展示 2.search.wxml标签展示 3.search.js展示 4.结果展示 二、函数节流解决问题 1.函数 2.实例应用 三、函数防抖解决问题 1.函数 2.原理 3.应用场景 4.应用实例 总结 问题引入…...

Mathematica(42)-计算N个数值的和

比如&#xff0c;我们要用Mathematica求得到下面的式子&#xff1a; 这就需要用到一个函数&#xff1a;Sum 具体地&#xff0c;Sum函数的使用形式如下&#xff1a; 因此&#xff0c;按照公式就可以得到下面的结果&#xff1a; 如果&#xff0c;我们想要将求和号也加进去&#…...

安装和配置 Ansible

安装和配置 Ansible 按照下方所述&#xff0c;在控制节点 control.area12.example.com 上安装和配置 Ansible&#xff1a; 安装所需的软件包 创建名为 /home/curtis/ansible/inventory 的静态清单文件&#xff0c;以满足以下要求&#xff1a; node1 是 dev 主机组的成员 node2 …...

电脑系统重装日记

重装原因 电脑C盘几乎爆炸故重装系统一清二白 此片原因 记录重装过程&#xff0c;强调一些要注意的点&#xff0c;以防日后重装。 重装过程 1.清空电脑文件后重启&#xff0c;电脑冒蓝光&#xff0c;一直蓝屏反复重启&#xff0c;故只能重装系统以解难题。 2.准备一个U盘&…...

通讯协议044——全网独有的OPC HDA知识一之聚合(十二)持续坏值时间

本文简单介绍OPC HDA规范的基本概念&#xff0c;更多通信资源请登录网信智汇(wangxinzhihui.com)。 本节旨在详细说明HDA聚合的要求和性能。其目的是使HDA聚合标准化&#xff0c;以便HDA客户端能够可靠地预测聚合计算的结果并理解其含义。如果用户需要聚合中的自定义功能&…...

Docker:Windows container和Linux container

点击"Switch to Windows containers"菜单时&#xff1a; 提示 然后 实际上是运行&#xff1a;com.docker.admin.exe start-service...

excel提示更新外部引用文件 这个提示能手动禁用

是的&#xff0c;你可以手动禁用 Excel 中的更新外部引用文件的提示。这些步骤可能因 Excel 版本而有所不同&#xff0c;以下是一般的步骤&#xff1a; 1. **打开 Excel**&#xff1a; 2. **进入“选项”**&#xff1a; - 在 Excel 中&#xff0c;点击顶部菜单中的“文件”…...

2023 最新 小丫软件库app开源源码 PHP后端

上传了源码解压之后&#xff0c;在admin/public/config.php修改后台登录账号和密码 后台地址&#xff1a;域名或者ip/admin 然后自己修改配置即可 后端搭建完成&#xff0c;现在导入iapp源码 导入iapp源码之后&#xff0c;修改mian.iyu载入事件的对接api和url就可以打包了 sss …...

Selenium 测试用例编写

编写Selenium测试用例就是模拟用户在浏览器上的一系列操作&#xff0c;通过脚本来完成自动化测试。 编写测试用例的优势&#xff1a; 开源&#xff0c;免费。 支持多种浏览器 IE&#xff0c;Firefox&#xff0c;Chrome&#xff0c;Safari。 支持多平台 Windows&#xff0c;Li…...

es自定义分词器支持数字字母分词,中文分词器jieba支持添加禁用词和扩展词典

自定义分析器&#xff0c;分词器 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 &#xff0c;报错 —— 在此系统上禁止运行脚本 然后 windows x &#xff0c;打开终端管理员&#xff0c;出现同样的问题 解决方法&#xff1a; 终端&#xff08;管理员&#xff09;执行以下命令&#xff1a; 出现 RemoteSigned 则代表更改成功…...

【C++】STL---list

STL---list 一、list 的介绍二、list 的模拟实现1. list 节点类2. list 迭代器类&#xff08;1&#xff09;前置&#xff08;2&#xff09;后置&#xff08;3&#xff09;前置- -、后置- -&#xff08;4&#xff09;! 和 运算符重载&#xff08;5&#xff09;* 解引用重载 和 …...

六、分组背包

六、分组背包 题记算法题目代码 题记 一个旅行者有一个最多能装V公斤的背包和有N件物品&#xff0c;它们的重量分别是W[1]&#xff0c;W[2]&#xff0c;…,W[n]&#xff0c;它们的价值分别为C[1],C[2],…,C[n]。这些物品被划分为若干组&#xff0c;每组中的物品互相冲突&#…...

LangChain入门:构建LLM驱动的应用程序的初学者指南

LangChain & DemoGPT 一、介绍 你有没有想过如何使用大型语言模型&#xff08;LLM&#xff09;构建强大的应用程序&#xff1f;或者&#xff0c;也许您正在寻找一种简化的方式来开发这些应用程序&#xff1f;那么你来对地方了&#xff01;本指南将向您介绍LangChain&#x…...

gitlab修改远程仓库地址

目录 背景&#xff1a; 解决&#xff1a; 1.删除本地仓库关联的远程地址&#xff0c;添加新的远程仓库地址 2.直接修改本地仓库关联的远程仓库地址 3.打开.git隐藏文件修改远程仓库地址 4.拉取代码报错(git host key verification failed) 背景&#xff1a; 公司搬家&#…...

VB+SQL自动点歌系统设计与实现

摘 要 随着社会的发展,人类的进步,21世纪人们的生活的水平有所提高,为了满足人们对生活的需要,丰富业余生活,就需要有一些娱乐的设施来弥补这些空缺,所以开发了自动点歌系统。 论文详细论述了系统总体设计思想、数据库设计以及功能模块设计等,给出了自动点歌系统一般流程…...

设计模式之适配器模式(Adapter)的C++实现

1、适配器模式的提出 在软件功能开发中&#xff0c;由于使用环境的改变&#xff0c;之前一些类的旧接口放在新环境的功能模块中不再适用。如何使旧接口能适用于新的环境&#xff1f;适配器可以解决此类问题。适配器模式&#xff1a;通过增加一个适配器类&#xff0c;在适配器接…...

C#系统锁屏事件例子 - 开源研究系列文章

今天有个网友问了个关于操作系统锁屏的问题。 我们知道&#xff0c;操作系统是基于消息和事件处理的&#xff0c;所以我们只要找到该操作系统锁屏和解屏的那个事件&#xff0c;然后在事件里进行处理即可。下面是例子介绍。 1、 项目目录&#xff1b; 下面是项目目录&#xff1a…...

R语言实现免疫浸润分析(2)

原始数据承接免疫浸润分析&#xff08;1&#xff09;&#xff0c;下面展示免疫浸润结果&#xff1a; #直接使用IOBR包内的cell_bar_plot pic<-cell_bar_plot(input quantiseq_immo_de[1:20,], title "quanTiseq Cell Fraction") #使用ggplot2 library(ggplot2)…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...