页面定时弹一次广告

最近有这么一个需求，每30分钟，当用户停留在本页面超过8秒，就要弹一个窗口，给用户一次提示

// 首先，写一个弹窗组件，便于多个地方复用

<template>
  <el-dialog title="" :visible.sync="dialogVisible" width="xxx" top='xxx' class="comp_popup" :close-on-press-escape="false" :close-on-click-modal="false">
    <a :href="xxx" target="_blank">
      <img src="xxx" alt="">
    </a>
    <i class="el-icon-close close" @click="handleClose"></i>
  </el-dialog>
</template>

  data() {
    return {
      dialogVisible: false,
      timeiner: null
    }
  },
  mounted() {
// 初次加载页面的时候，我们从本地localStorage 中取值，若没有，则为0
    let oldDate = localStorage.getItem('advTime') || 0
// 获取当前的时间戳
    let newDate = new Date().getTime()
// 如果当前的时间戳比缓存中的时间戳的值大于30分钟，则执行函数
    if (!this.is_complaint && ((newDate - oldDate) > 1800000)) {
      this.showComp()
    }
  },
  methods: {
    showComp() {
// 这里需要将this重新赋值，不然下面的dialogVisible不是同一个，会导致即使8秒钟过去了，但弹窗依旧不展示
      let _this = this
      clearInterval(this.timeiner)
      this.timeiner = setInterval(function () {
        _this.dialogVisible = true
// 获取当前的时间戳存在本地，
        let date = new Date().getTime()
        localStorage.setItem('advTime', date)
      }, 8000)
    },
    handleClose() {
      this.dialogVisible = false
      clearInterval(this.timeiner)
    },
  },
// 记得将延时器关闭并清除
  beforeDestroy() {
    clearInterval(this.timeiner)
    this.timeiner = null
  },

这样，一个简答的定时弹广告就做好了

最后

感谢你的阅读~

如果你有任何的疑问欢迎您在后台私信，我们一同探讨学习！

如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！