【微信小程序开发】小程序版的防抖节流应该怎么写

由于微信小程序与普通网页的开发、编译、运行机制都有所不同,在防抖节流的方法使用上也就需要我们做一些比较棘手的适配操作。常见的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.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/682683.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【AI视野·今日CV 计算机视觉论文速览 第300期】Tue, 30 Jan 2024

AI视野今日CS.CV 计算机视觉论文速览 Tue, 30 Jan 2024 Totally 146 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Computer Vision for Primate Behavior Analysis in the Wild Authors Richard Vogg, Timo L ddecke, Jonathan Henrich, …

应用进程跨越网络的通信

目录 1 系统调用和应用编程接口 应用编程接口 API 几种应用编程接口 API 套接字的作用 几种常用的系统调用 1. 连接建立阶段 2. 传送阶段 3. 连接释放阶段 1 系统调用和应用编程接口 大多数操作系统使用系统调用 (system call ) 的机制在应用程序和操作系统之间传递控制…

Java基于SpringBoot+vue的租房网站,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

[BIZ] - 1.金融交易系统数据特点

1.1 数据量极大 交易系统的数据量特大&#xff0c;主要来自以下几种类型的数据。 1.1.1 行情 行情是交易系统最为重要的数据&#xff0c;交易就是在不断变化的行情中寻找时机来实现盈利的。海量的行情主要分成两种&#xff0c;一种是tick数据&#xff08;也叫逐笔行情&#…

【学网攻】 第(27)节 -- HSRP(热备份路由器协议)

系列文章目录 目录 系列文章目录 文章目录 前言 一、HSRP(热备份路由器协议)是什么&#xff1f; 二、实验 1.引入 实验目标 实验背景 技术原理 实验步骤 实验设备 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交…

day 31贪心

day31 贪心 分发饼干 题目链接&#xff1a; 分发饼干 题目描述 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最…

MySQL性能调优篇(4)-查询语句的优化与重构

MySQL数据库查询语句的优化与重构 MySQL是一种常用的关系型数据库管理系统&#xff0c;广泛应用于Web开发中。在实际应用中&#xff0c;对数据库查询语句的优化和重构是提高应用性能和响应速度的重要手段。本文将介绍一些常见的优化技巧和重构方法&#xff0c;帮助开发者提高数…

sqlserver2012 解决日志大的问题

当SQL Server 2012的事务日志变得过大时&#xff0c;这通常意味着日志备份没有被定期执行&#xff0c;或者日志文件的自动增长设置被设置得太高&#xff0c;导致它不断增长以容纳所有未备份的事务。解决日志大的问题通常涉及以下几个步骤&#xff1a; 备份事务日志&#xff1a;…

OpenAI ChatGPT 记忆功能怎么实现?

你的聊天助手现在能“记住”你的对话了&#xff01; 2月14日凌晨&#xff0c;OpenAI宣布正在测试ChatGPT的新功能——记住用户提问内容&#xff0c;并自由控制内存。这意味着&#xff0c;ChatGPT能帮你记住那些重要的聊天内容&#xff0c;让你的对话更流畅、更自然。 想象一下…

HMI(人机界面设计)大扫盲了,UI设计的重要领域,附案例。

Hello&#xff0c;我是大千UI工场&#xff0c;开始分享HMI设计了&#xff0c;这个可是除了手机和电脑外的&#xff0c;最重要的设计领域哦&#xff0c;可能你觉的它很陌生&#xff0c;其实生活中处处可见。关注我们&#xff0c;学习N多UI干货&#xff0c;有设计需求&#xff0c…

Android 12.0 Camera 分辨率从高到低排列功能实现

1.前言 在12.0的系统ROM定制化开发功能中,在对Camera2的产品进行定制化的时候,在camera2的设置页面,总是会发现在预览 分辨率的列表中,有的产品不是按照分辨率的大小来进行排序显示的,所以就需要了解显示流程,然后按顺序排序来实现 功能,接下来实现相关功能 2.Camer…

C++中类和结构体的区别(代码说明)

C中的类和结构体都是用于定义自定义数据类型的关键字。它们之间有很多相似之处&#xff0c;但也有一些关键的区别。 1 主要区别 区别类结构体默认访问权限私有公有是否支持多态支持不支持是否支持继承支持支持是否可以定义构造函数和析构函数可以可以常用场景封装数据和行为&…

Python算法探索:从经典到现代(二)

一、引言 Python作为一种高级编程语言&#xff0c;其简洁明了的语法和丰富的库资源&#xff0c;使得它成为算法实现的理想选择。本文将带您从经典算法出发&#xff0c;逐步探索到现代算法&#xff0c;感受Python在算法领域的魅力。 二、经典算法&#xff1a;贪心算法 贪心算法…

[日常使用] Shell常用命令

Shell是什么&#xff1f; Shell简介 Shell是操作系统的外壳&#xff0c;是用户与操作系统内核之间的主要接口。它接收用户的命令并将其传递给内核执行&#xff0c;然后将执行结果返回给用户。Shell不仅是一个命令解释器&#xff0c;也是一种强大的编程语言。常见的Shell分为图…

【MySQL】-16 MySQL综合-2(MySQL的优点+MySQL5.7新特性+MySQL客户端和服务器端工具集)

MySQL的优点MySQL5.7新特性MySQL客户端和服务器端工具集 MySQL的优势&#xff08;优点&#xff09;MySQL 5.7的新特性1) 随机 root 密码2) 自定义 test 数据库3) 默认 SSL 加密4) 密码过期策略5) 用户锁6) 全面支持JSON7) 支持两类生成列&#xff08;generated column&#xff…

Web基础01-HTML+CSS

目录 一、HTML 1.概述 2.html结构解析 3.HTML标签分类 4.HTML标签关系 5.HTML空元素 6.HTML属性 7.常用标签 &#xff08;1&#xff09;HTML标签 &#xff08;2&#xff09;标题标签 &#xff08;3&#xff09;换/折行标签 &#xff08;4&#xff09;段落标签 &am…

开源软件:推动技术繁荣

目录 开源软件的影响力 开源软件的优点 开源软件如何推动技术创新 开源软件的商业模式 开源软件的安全风险 开源软件的未来发展趋势 开源软件的影响力 随着信息技术的快速发展&#xff0c;开源软件已经成为软件开发的趋势&#xff0c;并产生了深远的影响。开源软件的低成…

平常开发java项目时也没用序列化,没感觉到有啥影响呢,这是为什么?

平常开发java项目时也没用序列化&#xff0c;没感觉到有啥影响呢&#xff0c;这是为什么&#xff1f; 在日常的Java开发中&#xff0c;可能不会直接感受到序列化的存在&#xff0c;特别是在使用现代框架和技术栈时。这主要是因为很多底层细节已经由框架或库隐藏起来&#xff0…

<网络安全>《31 网络信息安全基础(2)中英术语整理》

A 01 高级持久威胁&#xff08;APT&#xff09; 一种网络攻击&#xff0c;使用复杂的技术持续对目标政府和公司进行网络间谍活动或其他恶意活动。通常由具有丰富专业知识和大量资源的对手进行-通常与民族国家参与者相关。 这些攻击往往来自多个入口点&#xff0c;并且可能使…

Django学习全纪录:Django视图和路由的配置,应用的创建以及注册

导言 在之前的文章中,我们已经将Django的环境部署完成,包括一些注意事项以及前期工作,都已经完成。这篇文章,我们就可以正式开始干活了。 学习目标 1、学习创建应用以及注册APP 2、初步认识视图和路由,以及编写简单的代码 3、启动应用观察变化 创建第一个应用(APP) …