前端实现表单30秒无操作自动保存
项目业务需求是当界面中的表单30秒没有操作进行内容自动提交服务端。其实此问题可以使用防抖操作来实现次功能,当用户在操作时不会提交表单,当用户在30秒内不操作,进行提交表单。
1、防抖函数的实现
//防抖函数实现自动保存 autoSave (val, oldVal) { if (this.timeID) { clearTimeout(this.timeID) } this.timeID = setTimeout(() => { //提交表单操作 }, 30000) },
2、在vue中watch监听表单数据发生改变则启动定时器。
dailyForm: { handler (val, old) { if (val !== old) { //启动定时器 this.autoSave() } }, deep: true //true 深度监听 },
3、在提交保存后将当前定时器清空