vue3--单独页面定时器 离开页面销毁定时器

1.data里定义timeInter

timeInter :null

2.mounted里应用定时器

  this.timeInter = setInterval(() => {
    this.Marquee()  // methods里的方法
  }, 70)

3.methods

  var demo = document.getElementById('demo')
  var demo1 = document.getElementById('demo1')
  var demo2 = document.getElementById('demo2')
  demo2.innerHTML = document.getElementById('demo1').innerHTML
  if (demo.scrollLeft - demo2.offsetWidth >= 0) {
    demo.scrollLeft -= demo1.offsetWidth
  } else {
    demo.scrollLeft++
  }

4.切换页面销毁定时器:vue3使用beforeUnmount()

  beforeUnmount() {
    console.log('idLLLL:', this.timeInter)
    clearInterval(this.timeInter);
    // this.stopColor()
    this.timeInter = null
},

完整代码:

  <template>
    <div>
        <div id="demo" class="qimo8"> 
        <div class="qimo"> 
          <div id="demo1"> 
            <ul> 
              <li v-for="(item,index) in dataList" :key="index">
                <p>{{ item.text}}</p>
              </li> 
            </ul> 
          </div> 
          <div id="demo2"></div> 
        </div> 
       </div>
    </div>
  </template>
  <script>
    export default{
      data() {
          return {
              timeInter: null
           }
      },
      mounted() {
        // 使用定时器
          this.timeInter = setInterval(() => {
            this.Marquee()  // methods里的方法
          }, 70)
       },
      methods: {
            Marquee() {
              var demo = document.getElementById('demo')
                var demo1 = document.getElementById('demo1')
                var demo2 = document.getElementById('demo2')
                demo2.innerHTML = document.getElementById('demo1').innerHTML
                if (demo.scrollLeft - demo2.offsetWidth >= 0) {
                  demo.scrollLeft -= demo1.offsetWidth
                } else {
                  demo.scrollLeft++
                }
              }
        },
      // 离开当前页面销毁定时器
        beforeUnmount() {
            console.log('idLLLL:', this.timeInter)
            clearInterval(this.timeInter);
            this.timeInter = null
        },
    }
  </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容