requestAnimationFrame(callback) with for loop issue

Question

Recently I find a strange issue with JavaScript's requestAnimationFrame(callback) method. This is my code:

var callback = undefined;
for (var i = 0; i < 3; i++) {
  var flag = 0;
  callback = (function (index) {
    return function () {
      if (flag < 5) {
        flag++;
        console.log('K  i=' + index + ' flag=' + flag);
        window.requestAnimationFrame(callback);
      }
    }
  })(i);
  window.requestAnimationFrame(callback);
}

In my expected, there should loop as following in console:

  K  i=0   flag=1
  K  i=0   flag=2
  K  i=0   flag=3
  K  i=0   flag=4
  K  i=0   flag=5
  K  i=1   flag=1
  K  i=1   flag=2
  K  i=1   flag=3
  K  i=1   flag=4
  K  i=1   flag=5
  K  i=2   flag=1
  K  i=2   flag=2
  K  i=2   flag=3
  K  i=2   flag=4
  K  i=2   flag=5

But in fact, the console log as these:

K  i=0   flag=1
K  i=1   flag=2
K  i=2   flag=3
K  i=2   flag=4
K  i=2   flag=5

What should I do to get my expected result using for loop and requestAnimationFrame()?

Is there a reason you're not just doing a nested for loop to get your expected result? — TW80000, Aug 23 '17 at 02:12
@Bergi Emmm... Allright, as you can see, in this example, `index` and `i` is a parameter needed in callback function. — RyougiShiki, Aug 23 '17 at 02:23
@RyougiShiki But why don't you just use `console.log('K i=' + i + ' flag=' + flag);` and get rid of the function with the `index` parameter? Can you explain what this construct does? — Bergi, Aug 23 '17 at 02:25
@TW80000 When a animation is required, I want to use requestAnimationFrame to achieve it, and `i` and `flag` as parameters in my code operation. — RyougiShiki, Aug 23 '17 at 02:27

JiangangXiong · Answer 1 · 2017-08-23T02:48:27.153

1

The window.requestAnimationFrame is a asynchronous function, for i from 0 to 2, you initialize three outer window.requestAnimationFrame task；

After the first three outer window.requestAnimationFrame task, the i from 0 to 2, and the flag increment to 3；

At the moment, the i is 2, the flag is 3, you have a if condition if (flag < 5) in every inner window.requestAnimationFrame callback , so the inner callback only run twice（for flag = 4，flag = 5）and the i is always 2.

I modify the code:

for (var i = 0; i < 3; i++) {
(function (index) {
    var flag = 0;
    var callback = function () {
        if (flag < 5) {
            flag++;
            console.log('K  i=' + index + ' flag=' + flag);
            window.requestAnimationFrame(callback);
        }
    }
    window.requestAnimationFrame(callback);
})(i);
}

edited Aug 23 '17 at 02:48

answered Aug 23 '17 at 02:27

JiangangXiong

2,326
1
12
14

As you say, is there any appropriate way to solve it. – RyougiShiki Aug 23 '17 at 02:38
Does this code meet your needs? – JiangangXiong Aug 23 '17 at 02:53
The order of console log is not really the same, but the result is correct, so it can meet my needs. – RyougiShiki Aug 23 '17 at 03:05

Steven Scaffidi · Accepted Answer · 2017-08-23T02:37:17.033

1

Why not just use ES6's let to make this job easier:

for (let i = 0; i < 3; i++) {
 for (let flag = 0; flag < 5; flag++) {
  window.requestAnimationFrame(() => console.log('K  i=' + i + ' flag=' + flag))
  }
}

The above gives the desired results.

ES5 Solution

function loop1 (i) {
function loop2 (flag) {
  window.requestAnimationFrame(function () {
   return console.log('K  i=' + i + ' flag=' + flag);
  });
 };

 for (var flag = 0; flag < 5; flag++) {
  loop2(flag);
 }
};

for (var i = 0; i < 3; i++) {
 loop1(i);
}

edited Aug 23 '17 at 02:37

answered Aug 23 '17 at 02:29

Steven Scaffidi

2,280
1
12
14

IE(even IE11) has poor support for ES6 – RyougiShiki Aug 23 '17 at 02:32
IE11 supports block scoped declarations https://caniuse.com/#search=let – Steven Scaffidi Aug 23 '17 at 02:34
ES6 is really elegant way to code it. But always it's a pity that in lower version's IE it cannot properly work. Thanks for your ES solution, it can work well. – RyougiShiki Aug 23 '17 at 02:44

requestAnimationFrame(callback) with for loop issue

2 Answers2