场景题： 20分钟页面不操作，页面失效

同一时间段，只允许一个编辑，后续编辑被拒绝
编辑功能具有默认超时机制，进入编辑状态后，停止操作20分钟后，自动退出编辑，提示“页面已失效”，回退到列表页面；如果操作了，计时会清零

解决方案：web sorker + setInterval

安装 npm i -D worker-loader

// vue.config.js 配置
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: config => {
    config.module.rule('worker')
      .test(/\.worker\.js$/)
      .use('worker')
      .loader('worker-loader')
     
      config.module.rule('js').exclude.add(/\.worker\.js$/);
  },
  parallel: false,
})

// file.worker.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:true,
  chainWebpack: config => {
    config.module.rule('worker')
      .test(/\.worker\.js$/)
      .use('worker')
      .loader('worker-loader')
     
      config.module.rule('js').exclude.add(/\.worker\.js$/);
  },
  parallel: false,
 
})

// edit.vue
<template>
  <div class="main">
    <button>编辑</button>
	<input @change='onChange'/>
  </div>
</template>

<script>
import Worker from "@/untils/file.worker.js";

export default {
  data() {
    return {
      myWorker: new Worker(),
      timeCount: 0
    }
  },
  methods: {
    // worker
    // 开启定时器
    onTimeStart() {
      this.myWorker.postMessage('start');
    },
    // 停止定时器
    onTimeEnd() {
      this.myWorker.postMessage('end')
    },
    // 重置定时器
    onTime() {
      this.onTimeEnd()
      this.onTimeStart();
    },
    // 开启worker
    playWorker() {
      this.myWorker.postMessage('start');
      // 接收消息
      this.myWorker.addEventListener('message', e => {
        console.log(e.data)
        // campaignListener(); // 发起续租
        if (e.data.sum >= 20) {
          this.onTimeEnd()

          if (document.visibilityState === 'visible') {
            this.$message({
              message: '页面失效',
              type: 'warning'
            })
            // 退出编辑
            this.$router.back()
            this.timeCount = 1
            console.log('=====-');
          }
          document.addEventListener('visibilitychange', function () {
            if (document.visibilityState == 'visible' && this.timeCount == 0) {
              this.$message({
                message: '页面失效',
                type: 'warning'
              })
              // 退出编辑
              this.$router.back()
              this.timeCount = 1;
              console.log('=====0000');
            }

          })
        }
      })
    },
    // 表单进行了操作则重置定时器
    onChange() {
      this.onTime()
    },
  	mounted() {
      this.playWorker()
  	}
}
</script>