前端实现表单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、在提交保存后将当前定时器清空

 

posted @ 2022-07-27 17:10  lovamiaomiao  阅读(792)  评论(0编辑  收藏  举报