javascript - js execution timing problem encountered in mini program

Question

The scene is a small program, and the binding in the small program is one-way. Here is an example. I want to set the color and then the name. The page must reflect this sequential relationship, that is, it turns red first, and then the name becomes Tom.

function test () {

  //促使页面刷新
  this.setData({
   viewColor: red
  })  

  this.setData({
   name: 'Tom'
 })
}

Actually do this, both are executed at the same time, my solution is as follows:

function test () {

  //促使页面刷新
  this.setData({
   viewColor: red
  })  

  setTimeout(function () {
    this.setData({
      name: 'Tom'
    })  
  }, 1000)

}

This way, you can change the color first and then change the name
Currently, my program is encountering performance problems, similar to several modules. I think there are a lot of counter abuse codes, but I don’t know how to solve them?

Answer 1

Why do you write function test (){}?

Page({
     data: {
         name: 'hello'
     },
     changeName(){
         this.setData({
             name: 'hehe'
         })
     }
})

After executing the changeName method, the name in the page will be updated without refreshing the page.
You can take a look at the small program demo I wrote: https://github.com/lin-xin/wx...