vue3笔记（32）交互优化写法综合

本篇记录涉及到的交互优化，包括：页面停留时间超过一小时跳转登录页、“请求过于频繁，建议5分钟后再试”、按钮防抖。

页面停留时间超过一小时跳转登录页

设计思路：页面打开时设置定时器，每 3分钟轮询一次，获取当前时间和初始时间的时间差，若轮询多次后时间差超过1小时，则跳转登录页面。
时间差计算函数如下：

// 返回true-停留时间已满1小时
const timeDiffStay = () => {
  const timeOut = 60 * 60 * 1000 // 设置超时时间
  const lastTime = Number(localStorage.getItem('comeTime'))
  const currentTime = new Date().getTime()
  let diff = currentTime - lastTime
  if (diff > timeOut) {
    return true
  } else {
    return false
  }
}

页面初始化存入初始时间，开启定时器；卸载时清除定时器；

onMounted(() => {
  localStorage.setItem('comeTime', new Date().getTime().toString())
  state.pageInterval = setInterval(checkTimeout, 3 * 60 * 1000)
})
onUnmounted(() => {
  localStorage.removeItem('comeTime')
  state.pageInterval && clearInterval(state.pageInterval)
})

const checkTimeout = () => {
  if (timeDiffStay()) {
    clearInterval(state.pageInterval)
    toLogin()
  }
}

请求过于频繁，建议5分钟后再试

设置5分钟内点击4次为频繁操作

const handleSendCode = () => {
  state.disCode = true // 防止点击两次
  state.sendCount = state.sendCount + 1
  if (state.sendCount == 1) {
        localStorage.removeItem('lastClickTime')
        localStorage.setItem('lastClickTime', new Date().getTime().toString())
      } else if (state.sendCount == 4) {
        const diffMin = timeDifference()
        if (diffMin <= 5) {
          ElMessage('请求过于频繁，建议5分钟后再试')
          state.sendCount = 0
          state.disCode5Min = true
          const times = setTimeout(() => {
            console.log('禁止时间到了')
            nextTick(() => {
              state.disCode5Min = false
              state.disCode = false
            })
            clearInterval(times)
          }, 1000 * 60 * 5)
          return
        }
      }
      // 触发倒计时
      state.notSend = false
      handleCountDownTimeSendCode()
}

<el-form-item label="邮箱：" prop="email">
    <el-input
      v-model="emailForm.email"
      type="text"
      placeholder="请输入绑定的邮箱"
      ref="emailInputRef"
    >
      <template #suffix>
        <el-button
          v-if="notSend"
          :disabled="disCode || disCode5Min"
          @click.stop="handleSendCode"
          class="btn-sendcode"
          >获取验证码</el-button
        >
        <el-button v-else class="btn-sendcode" :disabled="disCode">
          {{ countDownTimeSendCode }}s后再获取
        </el-button>
      </template>
    </el-input>
  </el-form-item>