背景。避免數據存儲后丟失。要求實時保存。
- 問題:保存時出現卡斷,輸入的內容會被抹除。
- 問題原因。輸入頻繁速度塊,會影響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;});
},
...