React Native-循环内的setTimeout

Question

I noticed a weird behavior with React Native when running setTimeout inside for loop. The code bellow works well on the browser:

const myString = '111000111';

for(var x =0; x < myString.length; x++) {
  if (myString[x] == '1') {
    (function(index) {
      setTimeout(()=>{
        console.log('number ' + index);
      }, index * 1000);
    })(x)
  }
}

The result in the browser is:

number 0
number 1
number 2
number 6
number 7
number 8

But when running the same code with React Native the result is:

number 0
number 1
number 8
number 2
number 7
number 6

Answer 1

There's no guarantee when and in which order timeouts are going to be fired and different JS implementations will yield different results (for example if the RN app is busy doing something else it might fire the timeout later).

If you need them to be in a specific order you'll need to change your implementation, use a queue or something like this.