【微信小程序开发】小程序版的防抖节流应该怎么写
由于微信小程序与普通网页的开发、编译、运行机制都有所不同,在防抖节流的方法使用上也就需要我们做一些比较棘手的适配操作。常见的H5开发的防抖节流此处就不再分享了,网上有太多的教程,或者直接问那群AI即可。
OK,言归正传,直接上代码:
一、防抖函数(TS版)及其使用案例
1、文件:pages/utils/index.ts
/** * 防抖函数 debounce* * @param fn 要防抖的函数* @param wait 等待时间,默认为500毫秒* @param isImmediate 是否立即执行,默认为true* @returns 返回防抖处理后的函数*/
let timerId: number | null = null;
let flag = true;
export const debounce = (fn: { apply: (arg0: any, arg1: IArguments) => void; }, wait = 500, isImmediate = true) => {if (isImmediate) {return function () {// @ts-ignoreconst context = this;timerId && clearTimeout(timerId);if (flag) {fn.apply(context, arguments);flag = false;}timerId = setTimeout(() => {flag = true;}, wait);};}return function () {// @ts-ignore 将当前上下文(this)赋值给 context const context = this;timerId && clearTimeout(timerId);timerId = setTimeout(() => {fn.apply(context, arguments);}, wait);};
};
2、文件:pages/views/demoPage/index.ts
import { debounce } from '../../utils/index';Page({/** 实际需要执行的方法 */clickHandler(e: any) {console.log('[clickHandler] e.currentTarget.dataset >>>');console.log(e.currentTarget.dataset);},/*** 防抖处理后的方法* 说明一下:其实这个才是重点,debounce写完以后,怎么绑定到页面中是个大问题!* 再尝试多次后,得出以下正确使用方式!* 当然,如果有更好的写法,欢迎大家评论补充,感谢一起分享!*/dbClickHandler(e) {debounce(this.clickHandler)(e);},
});
3、文件:pages/views/demoPage/index.wxml
这个就正常的bind就行,需要稍微注意的就是要bind包裹了一层防抖函数的 dbClickHandler,如下:
<button data-key="demoKey" bind:tap="dbClickHandler"></button>
二、节流函数(TS版)及其使用案例
节流的场景相对防抖还是比较少的,但是例如搜索框的大舌头效果还是很经典的,这个搜索提示的场景要求我们在节流的同时,必须确保用户最后一次输入的值执行搜索函数,因此该方法还是有那么点麻烦。
1、文件:pages/utils/index.ts
// 定义一个泛型类型 Func,代表任何接收任意参数并返回任意结果的函数
type Func = (...args: any[]) => any;
/** * 节流函数,用于限制给定函数的执行频率。 * * @param fn 需要进行节流的函数。 * @param delay 函数执行之间的延迟时间,以毫秒为单位。默认为500毫秒。 * @returns 返回一个新函数,当调用该新函数时,会根据指定的延迟时间执行被节流的函数。 */
export function throttle(fn: Func, delay = 500) {let lastFunc: any;let lastRan: number;let context: any;let args: any;let result: any;// 定义一个内部函数 executeFunc,用于实际执行传入的函数 fn const executeFunc = function () {result = fn.apply(context, args);lastRan = Date.now();clearTimeout(lastFunc as any);lastFunc = null;context = null;args = null;};// 返回一个新的函数,该函数在被调用时会执行节流逻辑 return function () {// @ts-ignore 将当前上下文(this)赋值给 self const self = this;context = self;args = arguments;const now = Date.now();if (!lastRan) {executeFunc();lastRan = now;} else if (now - lastRan < delay) {if (lastFunc) {clearTimeout(lastFunc as any);}lastFunc = setTimeout(executeFunc, delay);} else {executeFunc();}return result;};
}
2、文件:pages/views/demoPage/index.ts
import { throttle } from '../../utils/index';Page({/** 实际需要执行的方法 */myInputChange(e: any) {console.log('[myInputChange] doing...');console.log('[myInputChange] id:', e.target.id);console.log('[myInputChange] value:', e.detail.value);},/*** 节流处理后的方法* 注意:为了能成功用上节流这个方法,此处的写法也必须是这样类似选项式的写法*/throttleInputChange: throttle(function(e) {console.log('[throttleInputChange] doing...');// @ts-ignorethis.myInputChange(e)}),
});
3、文件:pages/views/demoPage/index.wxml
以下是一个地址搜索框的例子,还是注意下bind包裹后的节流函数throttleInputChange即可。
<input id='address' placeholder="小区/写字楼/学校等" bindinput="throttleInputChange" />
END.
相关文章:
【微信小程序开发】小程序版的防抖节流应该怎么写
由于微信小程序与普通网页的开发、编译、运行机制都有所不同,在防抖节流的方法使用上也就需要我们做一些比较棘手的适配操作。常见的H5开发的防抖节流此处就不再分享了,网上有太多的教程,或者直接问那群AI即可。 OK,言归正传&…...
单片机学习笔记---蜂鸣器播放提示音音乐(天空之城)
目录 蜂鸣器播放提示音 蜂鸣器播放音乐(天空之城) 准备工作 主程序 中断函数 上一节讲了蜂鸣器驱动原理和乐理基础知识,这一节开始代码演示! 蜂鸣器播放提示音 先创建工程:蜂鸣器播放提示音 把我们之前模块化的…...
软件实例分享,茶楼收银软件管理系统,支持计时计费商品销售会员管理定时语音提醒功能
软件实例分享,茶楼收银软件管理系统,支持计时计费商品销售会员管理定时语音提醒功能 一、前言 以下软件教程以 佳易王茶社计时计费管理系统软件V18.0为例说明 软件文件下载可以点击最下方官网卡片——软件下载——试用版软件下载 问:这个软…...
clang前端
Clang可以处理C、C和Objective-C源代码 Clang简介 Clang可能指三种不同的实体: 前端(在Clang库中实现)编译驱动程序(在clang命令和Clang驱动程序库中实现)实际的编译器(在clang-ccl命令中实现࿰…...
ARM:AI 的翅膀,还能飞多久?
ARM(ARM.O)于北京时间 2024 年 2 月 8 日上午的美股盘后发布了 2024 年第三财年报告(截止 2023 年 12 月),要点如下: 1、整体业绩:收入再创新高。ARM 在 2024 财年第三季度(即 23Q4…...
【C语言】常见字符串函数的功能与模拟实现
目录 1.strlen() 模拟实现strlen() 2.strcpy() 模拟实现strcpy() 3.strcat() 模拟实现strcat() 4.strcmp() 模拟实现strcmp() 5.strncpy() 模拟实现strncpy() 6.strncat() 模拟实现strncat() 7.strncmp() 模拟实现strncmp() 8.strstr() 模拟实现strstr() 9.str…...
pyGMT初步使用
文章目录 安装显示地图保存地图 安装 GMT,即Generic Mapping Tools,通用制图工具,是GIS领域应用最广泛的制图软件之一,用于绘制地图、图形以及进行地球科学数据分析和可视化。而pyGMT即其为python提供的函数接口,故而…...
神经网络 | CNN 与 RNN——深度学习主力军
Hi,大家好,我是半亩花海。本文主要将卷积神经网络(CNN)和循环神经网络(RNN)这两个深度学习主力军进行对比。我们知道,从应用方面上来看,CNN 用于图像识别较多,而 RNN 用于…...
thinkphp6入门(20)-- 如何上传图片、文件
1. 配置文件 设置上传的路径 对应文件夹 2. 前端 <div class"card-body"><h1 class"card-title">用户头像</h1><img src"../../../uploads/{$user.avatar_photo_path}" alt"avatar" height"100"/&g…...
【Linux技术宝典】深入理解Linux基本指令:命令行新手指南
📷 江池俊: 个人主页 🔥个人专栏: ✅数据结构冒险记 ✅Linux技术宝典 🌅 有航道的人,再渺小也不会迷途。 文章目录 一、Linux下基本指令1. ls 指令2. pwd指令3. clear指令4. cd指令什么是家目录…...
C++:Level1阶段测试
总结。 只要你看过我的文章,哪怕只是一半,一定能够过关! 准备好开始测试氻吗? 选择题,每题4分,共40分 1、 DevC的项目创建按钮是_____ A、文件[F]” → “新建[N]” → “项目[P]... B、工具[T]” → …...
autojs自动化刷视频脚本
视频展示 视频 //悬浮窗 // var window floaty.rawWindow( // <frame gravity"center" bg"#ff00ff"> // <button id"action" w"300dp" h"300dp"> // 按钮 // </button> // </fram…...
鲁南制药“健康幸福中国年”主题航班,开启探寻健康与幸福的旅程
“小年,小年,过了今天就是年。”提到过年,北方人的“过年”是从腊月二十三的“小年”开始的,而南方地区是在明天。虽然时间不同,但是浓浓的年味是一样的,红彤彤是主色调,喜洋洋是主乐曲…...
CISA知识点
审计流程21%;运营和业务恢复23%;保护资产27%;IT治理17%;开发12%。 领域1-信息系统审计流程 规划-现场工作-报告 (1)审计规划 了解业务使命、目标、目的和流程 找到相关规定 实施风险分析(…...
C语言求解猴子分桃子
问题:海滩上有一堆桃子,五只猴子来分。第一只猴子把这堆桃子平均分为五份,多了一个,这只 猴子把多的一个扔入海中,拿走了一份。第二只猴子把剩下的桃子又平均分成五份,又多了 一个,它同样把多的…...
本地部署 Stable Cascade
本地部署 Stable Cascade 0. 引言1. 事前准备2. 本地部署 Stable Cascade3. 使用 Stable Cascade 生成图片4. Stable Cascade Github 地址 0. 引言 Stable Cascade 模型建立在 Wrstchen 架构之上,它与 Stable Diffusion 等其他模型的主要区别在于它的工作潜在空间要…...
LeetCode 二叉树/n叉树的解题思路
二叉树 二叉树特点是每个节点最多只能有两棵子树,且有左右之分二叉树的数据结构如下: public class TreeNode {//节点的值int val;//左子树TreeNode left;//右子树TreeNode right;TreeNode(int x) { val x; } }树节点的初始化: int val1;T…...
opencv mat用法赋值克隆的操作和一些基本属性
//Mat基本结构 (头部 数据部分) //赋值的话 就是修改了指针位置 但还是指向了原来数据 并没创建数据 本质上并没有变 //只有克隆或者拷贝时 它才会真正复制一份数据 //代码实现 //创建方法 - 克隆 //Mat m1 src.clone(); //复制 //Mat m2; //src.copyTo(m2); //赋值法 …...
【使用IDEA总结】01——新增作者信息、方法参数返回值
[TOC](目录) 1.类新增作者信息 打开IDEA的Settings,Editor->Code Style->File and Code Templates->Includes->File Header,输入以下作者信息,作者名更换为自己的即可,操作如下图所示 /*** Author Linhaipeng* Date…...
ElasticSearch分词器和相关性详解
目录 ES分词器详解 基本概念 分词发生时期 分词器的组成 切词器:Tokenizer 词项过滤器:Token Filter 停用词 同义词 字符过滤器:Character Filter HTML 标签过滤器:HTML Strip Character Filter 字符映射过滤器&#x…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
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任务 三、…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
