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

React Native防止重复点击

项目中遇到了点击按钮重复提交的问题,防止重复点击首先是想到的是给点击事件一个定时,下次触发的条件是要距离上一次点击的时间大于N秒的之后才能再执行。

// 防重复点击函数
export const preventRepeatPress = {lastPressTi1me: 0,  	//  上次点击时间      repoTime: 2000,   		//  默认间隔时间2000  onPress(callback: () => void, waitTime: number = 2000) {let currTime = Date.now();if (currTime - this.lastPressTime > this.repoTime) {this.lastPressTime = currTime;this.repoTime = waitTime;         callback && callback();}},
};

在组件上的点击函数onPress中使用preventRepeatPress方法

<Button title="点击按钮" onPress={() => preventRepeatPress.onPress(() => fun())} /> 

在点击的时候可以传入设置间隔时间进行单独控制

() => preventRepeatPress.onPress(() => onCredit(),5000)

第二使用 setTimeout 函数

需要注意的是 timeout 需要放在全局也就是函数外部,否则的话每次调用 timeout 都会重新初始化导致防抖函数失去效果。

定义一个名为 debouncePlus 的函数,它接受一个函数 func,一个等待时间 wait(默认为 1000 毫秒)和一个 immediate 参数

// 定义一个变量 timeout,用于存储定时器的标识,变量作用域需要在函数外部
let timeout: string | number | NodeJS.Timeout | null | undefined = null;export const debouncePlus = (func: { apply: (arg0: any, arg1: IArguments) => void; },wait: number | undefined = 1000,immediate: any
) => {// 变量 result,用于存储函数执行的结果let result: any;// 定义一个内部函数 debounced,它将作为防抖后的函数被返回let debounced = function (this: any) {// 获取当前函数执行的上下文(this 指向)let context = this;// 获取传递给当前函数的参数let args = arguments;// 如果定时器已经存在,清除之前的定时器if (timeout) clearTimeout(timeout);// 如果 immediate 为真if (immediate) {// 如果 timeout 为 null,说明是第一次调用,应该立即执行函数let callNow = !timeout;// 设置一个新的定时器,在等待时间之后将 timeout 置为 nulltimeout = setTimeout(function () {timeout = null;}, wait);// 如果应该立即执行,则调用原始函数,并将结果存储在 result 中if (callNow) result = func.apply(context, args);}// 如果 immediate 为假else {// 设置一个新的定时器,在等待时间之后执行原始函数timeout = setTimeout(function () {func.apply(context, args);}, wait);}// 返回函数执行的结果(如果是 immediate 模式,可能是立即执行的结果;否则可能是 null)return result;};// 给 debounced 函数添加一个 cancel 方法,用于取消正在等待执行的定时器debounced.cancel = function () {clearTimeout(timeout);timeout = null;};// 返回防抖后的函数return debounced;
};

第三使用 hook

/*** 防抖hook*   const { run } = useDebounceFn(() => {setValue(value + 1)},{wait: 500,},);*/
import { useEffect, useMemo, useRef } from 'react';
import { debouncePlus } from './debounce-plus';const isDev = process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
const isFunction = (value: unknown): value is (...args: any) => any => typeof value === 'function';interface DebounceOptions {wait?: number;leading?: boolean;trailing?: boolean;maxWait?: number;
}type noop = (...args: any[]) => any;function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions) {if (isDev) {if (!isFunction(fn)) {console.error(`useDebounceFn expected parameter is a function, got ${typeof fn}`);}}const fnRef = useLatest(fn);const wait = options?.wait ?? 1000;const debounced = useMemo(() =>debouncePlus((...args: Parameters<T>): ReturnType<T> => {return fnRef.current(...args);},wait,options,),[],);useUnmount(() => {debounced.cancel();});return {run: debounced,cancel: debounced.cancel,// flush: debounced.flush,};
}export default useDebounceFn;export const useUnmount = (fn: () => void) => {if (isDev) {if (!isFunction(fn)) {console.error(`useUnmount expected parameter is a function, got ${typeof fn}`);}}const fnRef = useLatest(fn);useEffect(() => () => {fnRef.current();},[],);
};export function useLatest<T>(value: T) {const ref = useRef(value);ref.current = value;return ref;
}

有好的思路欢迎评论交流

相关文章:

React Native防止重复点击

项目中遇到了点击按钮重复提交的问题&#xff0c;防止重复点击首先是想到的是给点击事件一个定时&#xff0c;下次触发的条件是要距离上一次点击的时间大于N秒的之后才能再执行。 // 防重复点击函数 export const preventRepeatPress {lastPressTi1me: 0, // 上次点击时间…...

如何将Git本地代码推送到Gitee云端仓库

如何将Git本地代码推送到Gitee云端仓库 在使用Git进行版本控制时&#xff0c;将本地代码推送到远程仓库是一个基本且重要的操作。本文将详细介绍如何将你的Git本地代码推送到Gitee&#xff08;码云&#xff09;云端仓库。Gitee是一个国内非常流行的代码托管平台&#xff0c;类…...

架构师论文备考-论云原生架构及其应用

摘要 2022年3月&#xff0c;我有幸参与了公司的新智慧公交系统的研发工作。该系统基于B/S架构设计&#xff0c;并以多租户SaaS平台化为发展目标&#xff0c;旨在创建一个功能更全面、性能更卓越、稳定性更强、用户体验更佳的公交调度一体化平台。在这一项目中&#xff0c;我主要…...

12.java面向对象:java构造器

构造器 一个类即使什么都不写&#xff0c;也会存在一个方法。 假如我创建了一个类叫Student里面什么都不写&#xff0c;然后使用StudentDemo创建对象&#xff0c;运行没有结果&#xff0c;也没有报错。 public class Student {}public class StudentDemo {public static voi…...

微服务之间的安全通信

在微服务架构中&#xff0c;服务之间的通信是系统的核心部分。然而&#xff0c;由于服务的分布式和独立性&#xff0c;确保它们之间的通信安全至关重要。如果没有适当的安全机制&#xff0c;微服务系统可能会暴露在各种网络攻击和安全漏洞中。本文将讨论几种常见的微服务间安全…...

全面掌握 Jest:从零开始的测试指南(下篇)

在上一篇测试指南中&#xff0c;我们介绍了Jest 的背景、如何初始化项目、常用的匹配器语法以及钩子函数的使用。这一篇篇将继续深入探讨 Jest 的高级特性&#xff0c;包括 Mock 函数、异步请求的处理、Mock 请求的模拟、类的模拟以及定时器的模拟、snapshot 的使用。通过这些技…...

如何利用UML进行领域建模

如何利用UML进行领域建模 领域建模是通过创建抽象模型来反映业务领域中的核心概念、实体及其之间的关系。UML&#xff08;统一建模语言&#xff09;是进行领域建模的常用工具&#xff0c;它能帮助我们可视化地设计系统架构和业务逻辑。在这篇讲解中&#xff0c;我们将详细解释…...

Vue实用操作篇-1-第一个 Vue 程序

安装 Vue 非常的简便&#xff0c;只需下载好 Vue 对应的 .js 文件&#xff0c;在 html 中引入 vue.js 即可使用 Vue 下载好了 vue.js 我们便可以编写我们的第一个 vue 程序了 <!doctype html> <html lang"zh-CN"><head><meta charset"utf…...

Qwen2-VL的微调及量化

一、Qwen2-VL简介 Qwen2-VL是Qwen-VL的升级版本&#xff0c;能力更强&#xff0c;性能全面提升。尤其是72B参数的版本更是取了惊人的成绩。它可以读懂不同分辨率和不同长宽比的图片&#xff0c;在 MathVista、DocVQA、RealWorldQA、MTVQA 等基准测试创下全球领先的表现&#xf…...

[数据集][目标检测]车窗状态检测车窗开关检测数据集VOC+YOLO格式299张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;299 标注数量(xml文件个数)&#xff1a;299 标注数量(txt文件个数)&#xff1a;299 标注类别…...

自动泊车系统中的YOLOv8 pose关键点车位线检测

自动泊车系统中的YOLOv8关键点车位线检测技术解析 引言 随着智能驾驶技术的快速发展&#xff0c;自动泊车功能成为了现代汽车的重要组成部分。它不仅能够提高驾驶的安全性&#xff0c;还能在一定程度上解决城市停车难的问题。在自动泊车系统中&#xff0c;准确识别停车位的位置…...

Java html生成pdf和图片

在 Java 项目中将 HTML 生成图片是一项常见需求&#xff0c;特别是用于生成报告、预览页面截图等。不同的库和工具在渲染能力、性能以及支持的功能上有所不同。以下是几种主流的技术选型和对比&#xff0c;帮助你选择适合的解决方案。 技术对比总结 技术名称优点缺点适用场景…...

JavaWeb笔记整理——Redis

目录 Redis数据类型 各种数据类型的特点 Redis常用命令 字符串操作命令 哈希操作命令 列表操作命令 集合操作命令 有序集合操作命令 通用命令 在Java中操作Redis Spring Data Redis的使用方式 操作字符串类型的数据 ​编辑操作hash类型的数据 ​编辑 操作列表类…...

数据库(mysql)常用命令

一.常见的数据库端口号 Mysql默认端口:3306 oracle 默认端口:1521 Sql server 默认端口:1433 注:Mysql采用 的是C/S(客户端/服务器端)架构 二.sql 语法基础 服务器,数据库,数据表,记录,字段之间的关系: 一台Mysql服务器可以管理多个数据库 一个数据库可以存在多张二维表…...

源网荷储一体化新型电力系统解决方案

风光装机快速增长&#xff0c;加剧电力系统不可控性。截至2023H1&#xff0c;我国风电装机389.21GW&#xff0c;太阳能装机470.67GW&#xff0c;风光合计占总装机的31.76%。其中&#xff0c;2023年H1我国风电新增装机22.99GW&#xff0c;对比22年同期新增12.94GW&#xff0c;同…...

树莓派安装 OpenCV 教程

以下是在树莓派上安装 OpenCV 的教程&#xff1a; 笔者当前Python版本&#xff1a;3.7.3 一、更新树莓派系统 在终端中运行以下命令&#xff1a; sudo apt update sudo apt upgrade二、安装必要的依赖项 安装构建工具和图像 I/O 库&#xff1a; sudo apt install build-e…...

01,大数据总结,zookeeper

1 &#xff0c;zookeeper &#xff1a;概述 1.1&#xff0c;zookeeper&#xff1a;作用 1 &#xff0c;大数据领域 &#xff1a;存储配置数据   例如&#xff1a;hadoop 的 ha 配置信息&#xff0c;hbase 的配置信息&#xff0c;都存储在 zookeeper 2 &#xff0c;应用领…...

伪工厂模式制造敌人

实现效果 1.敌人方实现 敌人代码 using UnityEngine; using UnityEngine.UI;public class EnemyBasics : MonoBehaviour {public int EnemySpeed { get; internal set; }public int EnemyAttackDistance { get; internal set; }public int EnemyChaseDistance { get; interna…...

【linux】pwd命令

pwd 命令在 Linux 和类 Unix 系统中用于显示当前工作目录的完整路径。它是 "print working directory" 的缩写。 当你在终端或命令行界面中工作时&#xff0c;你可能会在不同的目录&#xff08;或文件夹&#xff09;之间切换。pwd 命令帮助你确定你当前位于哪个目录…...

Python 如何封装工具类方法,以及使用md5加密

第一步&#xff1a;封装使用方法 在utils目录中&#xff0c;编写我的md5加密的方法&#xff0c;如下&#xff1a; import re import hashlib from os import path from typing import Callable from flask import current_app# 这里封装的是工具类的方法def basename(filenam…...

别再踩坑了!Django Ckeditor配置全指南:从基础使用到高级定制(2023最新版)

Django Ckeditor实战手册&#xff1a;2023年高效配置与深度定制技巧 如果你正在为Django项目寻找一个功能强大且可定制的富文本编辑器&#xff0c;Ckeditor无疑是最佳选择之一。但配置过程中那些令人头疼的兼容性问题、图片上传失败、工具栏自定义困难&#xff0c;确实让不少开…...

告别兼容性问题:手把手教你用canvas和base64转换TIFF图片

前端工程师必备&#xff1a;TIFF图片处理全攻略与实战解决方案 在当今数字内容爆炸式增长的时代&#xff0c;图片处理已成为前端开发中不可或缺的一环。作为专业开发者&#xff0c;我们经常需要面对各种图片格式的兼容性问题&#xff0c;其中TIFF&#xff08;Tagged Image Fil…...

IDEA插件开发:集成Nunchaku-flux-1-dev实现代码注释自动图解

IDEA插件开发&#xff1a;集成Nunchaku-flux-1-dev实现代码注释自动图解 1. 引言 作为一名Java开发者&#xff0c;你是否曾经面对过这样的困境&#xff1a;接手一个复杂的遗留系统&#xff0c;代码量庞大但注释稀少&#xff0c;逻辑关系错综复杂&#xff0c;光是理解代码执行…...

从拒稿到录用:我的TOMM投稿实战复盘与经验分享

1. 从TMM拒稿到TOMM录用的心路历程 第一次收到TMM的拒稿邮件时&#xff0c;我正在实验室熬夜改代码。邮件弹出来的那一刻&#xff0c;整个人就像被泼了一盆冷水。那篇论文已经经历了三轮大修&#xff0c;每次都是几十条审稿意见&#xff0c;我们团队前前后后修改了上百个细节。…...

uniapp集成腾讯地图:从marker点聚合到轨迹回放的跨端实战与性能调优

1. uniapp集成腾讯地图SDK的核心步骤 第一次在uniapp里用腾讯地图SDK时&#xff0c;我踩了个大坑——直接在H5端跑代码发现地图出不来。后来才明白&#xff0c;腾讯地图在H5端需要单独配置安全域名。具体操作是在腾讯地图开放平台申请key时&#xff0c;必须把H5的域名加入白名单…...

mkcert 命令文档 - 本地 HTTPS 开发证书生成工具详解

1. 命令简介mkcert 是一个用 Go 语言编写的、零配置的本地开发用自签名证书生成工具。它能够自动创建并安装本地证书颁发机构&#xff08;CA&#xff09;到系统的信任存储中&#xff0c;并生成受本地信任的开发证书&#xff0c;大幅简化 HTTPS 本地开发环境的搭建过程&#xff…...

告别msi2lmp参数缺失!手把手教你用Perl脚本insight2lammps搞定MS到LAMMPS的data文件转换

告别msi2lmp参数缺失&#xff01;手把手教你用Perl脚本insight2lammps搞定MS到LAMMPS的data文件转换 分子动力学模拟研究者们常常遇到这样的困境&#xff1a;在Materials Studio&#xff08;MS&#xff09;中精心构建的模型&#xff0c;导出后却因LAMMPS自带的msi2lmp工具参数缺…...

Lingbot-Depth-Pretrain-ViTL-14 Anaconda环境搭建:创建隔离的Python开发与推理环境

Lingbot-Depth-Pretrain-ViTL-14 Anaconda环境搭建&#xff1a;创建隔离的Python开发与推理环境 你是不是也遇到过这种情况&#xff1a;好不容易跟着教程跑通了一个AI项目&#xff0c;结果过两天想跑另一个项目时&#xff0c;发现各种库版本冲突&#xff0c;报错满天飞&#x…...

Z-Image-Turbo商业应用探索:稳定可靠的AI绘画方案推荐

Z-Image-Turbo商业应用探索&#xff1a;稳定可靠的AI绘画方案推荐 1. 商业级AI绘画的新选择 在数字内容创作需求爆炸式增长的今天&#xff0c;Z-Image-Turbo作为阿里通义实验室开源的文生图模型&#xff0c;凭借其卓越的稳定性和高效性&#xff0c;正在成为商业应用领域的新宠…...

5步清理60GB重复视频:Krokiet视频查重工具全攻略

5步清理60GB重复视频&#xff1a;Krokiet视频查重工具全攻略 【免费下载链接】czkawka 一款跨平台的重复文件查找工具&#xff0c;可用于清理硬盘中的重复文件、相似图片、零字节文件等。它以高效、易用为特点&#xff0c;帮助用户释放存储空间。 项目地址: https://gitcode.…...