小程序實時保存優化

背景。避免數據存儲后丟失。要求實時保存。

  • 問題:保存時出現卡斷,輸入的內容會被抹除。
  • 問題原因。輸入頻繁速度塊,會影響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
英文地址,請注明出處:http://en.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;的競爭訪問的一系列機制和技術。其核心目標是保證多個并發單元在操作共享資源時的數據一…