0

I would like to monitor the content of a for loop every X millisecond:

Here is an example, I expect to see progression percentage every 0.1 seconds :

for (i = 0, max = 9007199254740992, timer = setInterval(function() {console.log(100*i/max);}, 100); i < max; i++) {
  // something
}
clearInterval(timer);

But it does not output anything.

I would like not to add a test in my loop to avoid using useless computation time.

4
  • 2
    For loop will be completed within 100ms Commented Aug 10, 2016 at 9:21
  • @RajaprabhuAravindasamy – I has got nothing to do with entirely for loop but initialization in the loop
    – Rayon
    Commented Aug 10, 2016 at 9:22
  • 1
    Callback function of setInterval will get invoked after the duration, as clearInterval is obviously invoked before 100ms, callback is never invoked.
    – Rayon
    Commented Aug 10, 2016 at 9:23
  • @Rayon What i meant to say is, before invoking the first function reference in the callBack queue, the for loop will be completed and the setInterval will also be cleared. So no O/P will be displayed. Commented Aug 10, 2016 at 9:25

1 Answer 1

7

Due to the single-threaded nature of Javascript, your setInterval() callback can't possibly be called before the end of the for loop, no matter how long it takes to execute.

I'd recommend to do it the other way around: log elapsed time every N iterations.

var res = [],
    ts = performance.now();

for(var i = 0, max = 1E6; i < max; i++) {
  if(!(i % 10000)) {
    res.push(performance.now() - ts);
  }
  // do something
}

console.log(res);

Or:

var res = [],
    ts = performance.now();

for(var i = 0, iMax = 1E6; i < iMax; i += 10000) {
  for(var j = i, jMax = Math.min(i + 10000, iMax); j < jMax; j++) {
    // do something
  }
  res.push(performance.now() - ts);
}

console.log(res);

If you really want to log in real time, you'd have to yield control to the browser after each batch of N iterations. Performance wise, this will probably have a significant impact, though.

var res = [],
    ts = performance.now();

function processBatch(i, iMax, sz) {
  for(var j = i, jMax = Math.min(i + sz, iMax); j < jMax; j++) {
    // do something
  }
  console.log((j * 100 / iMax) + '%', (performance.now() - ts).toFixed(2) + 'ms');

  if(j < iMax) {
    setTimeout(function() { processBatch(j, iMax, sz); }, 0);
  }
}

processBatch(0, 1E6, 10000);

EDIT: This third method was significantly updated. The previous version was erroneous.

6
  • 1
    You are correct about the reason it isn't called, but OP said they don't want to do a test in their loop " to avoid using useless computation time". Perhaps use nested loops with the test in the outer loop? Or web workers (seems overly complicated though)?
    – samgak
    Commented Aug 10, 2016 at 9:43
  • 1
    @samgak You're right. However, any measure will alter the results. I've added an alternate method, though.
    – Arnauld
    Commented Aug 10, 2016 at 9:52
  • 1
    you can get way cheaper than modulo by using a bit-mask: mask = (1<<13)-1 if(!(i&mask)){ does the same as %8192. downside: you have to stick with powers of 2. And your second attempt will overshoot, if max%10000 !=0 better: for(var i=0, max=1E6;i<max;){ for(var cnt=10000; i<max && cnt--; ++i){ //....
    – Thomas
    Commented Aug 10, 2016 at 10:04
  • @Thomas You're right about the bitmask optimization, but I think the second method is better anyway. Regarding the 2nd issue, I've added a jMax variable to avoid computing the upper bound on each iteration (although the JS engine might actually figure out that i + 10000 is a constant in this block and optimize that by itself). Thanks!
    – Arnauld
    Commented Aug 10, 2016 at 10:25
  • @Arnauld jMax = Math.min(iMax, i+10000) or for(/*... */; j < jMax && j < iMax; /*... */)
    – Thomas
    Commented Aug 10, 2016 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.