小程序实时保存优化

背景。避免数据存储后丢失。要求实时保存。

  • 问题:保存时出现卡断,输入的内容会被抹除。
  • 问题原因。输入频繁速度块,会影响cpu处理速度。
  • 解决方案。用户停止输入500ms后开始保存,否则不保存。
  • 这里是保存方法:当500ms以内有保存需求时,会清除上一个计时器,上一次的保存需求会被终止,不会进行保存;否则计时器就会调用保存方法进行保存
    在这里插入图片描述
  • 具体代码
...
/** @change触发, dynamic-render中组件会监听改变将事件通知出来 */
<template><view class="exagree-container"><dynamic-renderref="dynamicRender"v-if="formConfConstruct.formModel":formModel="formConfConstruct.formModel.widgetList":formData="formConfConstruct.formData":readOnly="readOnly":formLogic="formConfConstruct.formModel.formLogic"@change="handleFormChange"></dynamic-render><!-- 提交按钮区域 --><view class="submit-section" v-if="!readOnly && formConfConstruct.formModel"><button type="submit" @click="debounceSubmit" class="submit-btn" :disabled="isSubmitting" :loading="isSubmitting">{{ isSubmitting ? '提交中...' : '提交' }}</button></view></view>
</template>
/** 监测数据实时更新 - 防抖优化 */
handleFormChange(formData) {// 清除之前的定时器if (this.saveTimer) {clearTimeout(this.saveTimer);}// 设置新的防抖定时器,500ms后执行保存this.saveTimer = setTimeout(() => {this.performSave(formData);}, 500);
},/** 执行实际的保存操作 */
performSave(formData) {// 如果正在保存中,跳过本次保存if (this.isSaving) {return;}// 检查数据有效性if (!formData || Object.keys(formData).length === 0) {return;}this.isSaving = true;saveFormDraft({formData: formData,id: this.draft?.id || '',applicantId: loginInfo.getLoginUser().userId,sceneType: 'executeAgreement'}).then((response) => {console.log('Draft saved successfully');}).catch((error) => {console.error('Error saving draft:', error);}).finally(() => {this.isSaving = false;});
},
...

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

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

相关文章

国产化Excel处理组件Spire.XLS教程:使用 C# 将 DataTable 导出为 Excel 文件

在 C# 中将 DataTable 导出为 Excel 文件&#xff0c;是 .NET 开发中常见的任务&#xff0c;广泛应用于报表生成、日志导出、系统间数据共享等场景。通过使用独立的组件库&#xff0c;开发者可以轻松将 DataTable 数据写入 Excel 文件&#xff0c;并应用格式设置&#xff0c;生…

C语言学习笔记——编译和链接

目录1 C程序的执行流程2 翻译环境2.1 预编译2.2 编译2.2.1 词法分析2.2.2 语法分析2.2.3 语法分析2.3 汇编2.4 链接1 C程序的执行流程 用户编写好的C程序不能直接被计算机识别并执行&#xff0c;在执行前&#xff0c;要先将源文件和头文件进行编译&#xff0c;生成目标文件&am…

Flink-1.19.0源码详解9-ExecutionGraph生成-后篇

《Flink-1.19.0源码详解8-ExecutionGraph生成-前篇》前篇已从Flink集群端调度开始解析ExecutionGraph生成的源码&#xff0c;解析了ExecutionGraph的ExecutionJobVertex节点、ExecutionVertex节点、IntermediateResult数据集、IntermediateResultPartition数据集分区与封装Task…

19、阈值分割+blob分析

目录 一、仿射变换 1.变换矩阵 2.在矩阵的基础上添加各种变换形式 3.开始变换 4.计算变换矩阵参数 新算子 二、阈值分割 新算子 三、blob分析案例 1.焊点 2.石头 3.木材 4.车牌 5.骰子 新算子 一、仿射变换 1.变换矩阵 // 产生仿射变换矩阵hom_mat2d_identity…

破解 Django N+1 查询困境:使用 select_related 与 prefetch_related 实践指南

破解 Django N+1 查询困境:使用 select_related 与 prefetch_related 实践指南 开篇引入 数据库查询性能常常是 Web 应用性能瓶颈中的重中之重。Django ORM 以简洁直观的 API 层将 Python 代码与数据库打通,却也可能因默认的惰性加载带来 N+1 查询问题,造成不必要的网络往…

深入解析K-means聚类:从原理到调优实战

一、聚类分析与K-means的核心价值在无监督学习领域&#xff0c;聚类分析是探索数据内在结构的核心技术。​K-means算法因其简洁高效成为最广泛使用的聚类方法&#xff0c;在客户分群、图像压缩、生物信息学等领域应用广泛。其核心目标是将数据集划分为K个簇&#xff0c;实现“簇…

数据结构基础:哈希表、排序和查找算法

目录 一、哈希表 1.哈希算法 2.哈希碰撞 3.哈希表 4.哈希表相关操作 哈希表插入 哈希表遍历 元素查找 哈希表销毁 二、排序算法 1. 排序算法对比 2. 排序算法实现 冒泡排序 选择排序 插入排序 希尔排序 快速排序 三、查找算法 1. 查找算法对比 2. 查找算法实…

Linux内核参数调优:为K8s节点优化网络性能

在高并发微服务环境中&#xff0c;网络性能往往成为K8s集群的瓶颈。本文将深入探讨如何通过精细化的Linux内核参数调优&#xff0c;让你的K8s节点网络性能提升30%以上。引言&#xff1a;为什么网络调优如此重要&#xff1f;作为一名在生产环境中维护过数千节点K8s集群的运维工程…

全家桶” 战略如何重塑智能服务标准?无忧秘书 AI + 智脑 + 数字人协同模式的底层架构解析

在数字化浪潮的推动下&#xff0c;企业对智能化服务的需求日益增长。然而&#xff0c;单一的技术或产品往往难以满足复杂场景下的多样化需求。近年来&#xff0c;“全家桶”战略成为科技行业的一大趋势&#xff0c;通过整合多维度技术与服务&#xff0c;为企业提供全方位的支持…

前端后端之争?JavaScript和Java的特性与应用场景解析

一、名字相似&#xff0c;本质迥异 1.1 历史渊源与命名背景 在编程世界中&#xff0c;很少有两种语言像JavaScript和Java这样&#xff0c;仅仅因为名字的相似性就引发了无数初学者的困惑。然而&#xff0c;这种相似性纯属巧合——或者说是一种营销策略的产物。 JavaScript诞…

【文献分享】Machine learning models提供数据和代码

数据输入及前期信息&#xff1a;ChronoGauge 需要一个基因表达矩阵&#xff0c;其中包括来自多个时间进程 RNA-测序实验的观测数据&#xff0c;用于训练&#xff0c;并且需要有关每个基因在连续光照&#xff08;LL&#xff09;条件下经过光暗&#xff08;LD&#xff09;周期调整…

PHP MySQL Delete 操作详解

PHP MySQL Delete 操作详解 引言 在Web开发中&#xff0c;数据库是存储和管理数据的重要工具。PHP作为一种流行的服务器端脚本语言&#xff0c;与MySQL数据库结合使用可以高效地处理数据。本文将详细介绍PHP中如何使用DELETE语句删除MySQL数据库中的数据。 什么是DELETE语句&am…

计组-大/小端存放区别

在计算机系统中&#xff0c;大端存放&#xff08;Big-Endian&#xff09;和小端存放&#xff08;Little-Endian&#xff09;是两种不同的多字节数据存储方式&#xff0c;主要区别在于字节在内存中的排列顺序。理解它们对底层编程&#xff08;如网络通信、二进制文件处理、硬件交…

线程同步相关知识

文章目录一、线程同步的核心目标二、线程安全的判定条件三、同步方式一&#xff1a;synchronized 关键字1. 同步代码块2. 同步方法四、锁的释放与不释放场景1. 自动释放锁的场景2. 不会释放锁的场景五、同步方式二&#xff1a;ReentrantLock&#xff08;显式锁&#xff09;1. 核…

Armoury Crate无法通过BIOS卸载

设备&#xff1a;天选4 Armoury Crate窗口反复弹出影响使用体验&#xff0c;但无法通过BIOS关闭该怎么办&#xff1f;本文以天选4为例提供解决方案。 Step1&#xff1a;进入服务支持官网 Armoury Crate-服务支持 下滑点击”查看更多” 下载安装卸载工具 得到Armoury_Crate_Un…

如何将视频转为GIF格式,3大视频转为GIF工具

在社交媒体和即时通讯盛行的当下&#xff0c;GIF 动图以其独特的魅力备受青睐。它能够生动地捕捉视频中的精彩瞬间&#xff0c;凭借体积小巧、无需复杂加载且可循环播放的特性&#xff0c;成为了人们在网络交流中表达情感、分享趣事的得力工具。无论是制作诙谐幽默的表情包&…

开发避坑指南(22):Vue3响应式编程中this绑定机制与解决方案

错误信息 TypeError: Cannot read properties of undefined (reading find) TypeError: r.vnode.el.querySelector is not a function报错背景 vue2项目升级到vue3后&#xff0c;原来的代码报错。 报错代码computed: {/** 计算列的显示与隐藏*/columnVisible() {return functio…

AI学习笔记三十五:实时传输视频

若该文为原创文章&#xff0c;转载请注明原文出处。 目的是实现视频的传输&#xff0c;只是个demo. 程序分为两部分&#xff0c;视频接收端和视频发送端。 一、视频接收端流程分析 主要流程&#xff1a; 初始化配置&#xff1a; 设置UDP端口&#xff08;5001&#xff09;和缓…

【ArcGIS】分区统计中出现Null值且Nodata无法忽略的问题以及shp擦除(erase)的使用——以NDVI去水体为例

需求 已有某地NDVI栅格、行政区shp以及水体shp&#xff0c;计算每个行政区的平均NDVI 问题 1.如果不剔除水体 负值NDVI会把平均值拉低 且水体NDVI并不全为负 需要通过shp剔除&#xff0c;Mask掩膜是提取水体本身而不是剩余部分 2.使用分区统计工具&#xff08;Zonal statis…

Linux中的内核同步源码相关总结

什么是内核同步Linux 内核同步是指内核中用于解决并发执行单元&#xff08;如进程、中断、内核线程等&#xff09;对共享资源&#xff08;如全局数据结构、硬件寄存器、链表等&#xff09;的竞争访问的一系列机制和技术。其核心目标是保证多个并发单元在操作共享资源时的数据一…