The problem of repeated calls in the form of an index (setInterval, this.$set, this.$forceUpdate()) is commonly executed by the timer and the rendering page method under Vue

The problem is easy to understand. When the business environment requires it, it will be executed immediately after entering the page, such as doing a countdown.
Put the timer and render page data this.set , this.set, this.s e t , t h i s . forceUpdate() function, when put together,
there is a problem: when the rendering function is executed, the page regenerates a new timer, so it will cause repeated calls in exponential form. Solve the problem: 1. When there is only one timer, let the timer be defined
under
the window, and judge before execution. If there is, no longer create it, or delete it

if(!window.setTime){
    
    
	window.setTime = setInterval(this.$forceUpdate(),1000)
}

2. When there are multiple timers, or the timer needs to generate multiple timers according to the business list logic

      this.timeeT.forEach(item => {
    
    //删除所有定时器
        clearInterval(item)
      })
      this.list.forEach((item, i) => {
    
    //遍历列表数据
        if (item.startDate) {
    
    
          this.timeeT[i] = setInterval(() => {
    
    //通过条件生成多个定时器
            this.timee[i] = i+1
            console.log(this.timee[i], i)
            this.$forceUpdate()
          }, 60000)
        }
      })

I haven’t found many solutions to this kind of problem on the Internet. I hereby record it. If you have any better solutions, please write them out and learn together. 0.0

Guess you like

Origin blog.csdn.net/weixin_43311271/article/details/113308267