Increment loop but it increments at the end

Question

I’m trying to use an increment loop but I want it to increment at the end of the loop. Sadly, whenever I simply put the i++ at the end of the loop it doesn’t behave like I’d expect or want it to. Anyone mind showing me the proper way of doing it?

The referred increment loop:

for (i = 1; i < 15; i++) {
  // do somthing here
}

Here is the loop I’m working with:

for (i = 1; i < 15; i++) {
  for (x = 1; x < 15; x++) {
    var take = document.getElementById("row" + i + "sm" + x);

    Tesseract.recognize(take)
      .then(function(result) {
        console.log(result.text);
        // rows[i][x] = result.text;
      })
  }
}

What I’d like it to do:

for (i = 1; i < 15) {
  for (x = 1; x < 15) {
    var take = document.getElementById("row" + i + "sm" + x);

    Tesseract.recognize(take)
      .then(function(result) {
        console.log(result.text);
        //rows[i][x] = result.text;
        x += 1;
      })
    i += 1;
  }
}

I am using the for loop because I need to iterate over something one by one. How do I properly increment i at the end of the loop?

Here is a video explaining my problem with context and explanation why it is not an ASYNC problem. Sorry if it is hard to follow, ill update it with audio soon so I can explain it propperly.

https://drive.google.com/file/d/1n1ZwNJif5Lb5zfLb2GPpBemObwpOqNf7/view

Answer 1

The problem is that the second one doesnt wait until first one is complete.

You can try with recursion inside then. There maybe some mistake with i,x but you get the point.

You execute first with i=1 and x=1, after the operation is done (then) you call the next until all elements are executed.

function execItem(i, x) {
    var take = document.getElementById("row" + i + "sm" + x);
    Tesseract.recognize(take)
    .then(function(result){
        rows[i][x] = result.text;
        if (i < 15 && x < 15) {
            if (i > 15) {
                x += 1
                i = 1
            } else {
                i += 1
            }
            execItem(i, x)

        } 
    })
}
execItem(1, 1)

Answer 2

As a comment suggests this actually seems likely to be a problem with an asynchronous call (Tesseract...then) inside a loop. By the time the function inside then is called, your values of x and i have already moved on, so you don't get the result you expect.

One way around this would be to use a 'closure' - making a function that creates another function based on the value of i and x.

function getDisplayFunc(row, col) {
    function displayRecognisedText(result) {
      console.log(row, col, result.text);
     //rows[row][col] = result.text;
  }
  return displayRecognisedText;
}

for (i = 1; i < 15; i++) {
    for (x = 1; x < 15; x++) {
        var take = document.getElementById("row" + i + "sm" + x);
        Tesseract.recognize(take).then(getDisplayFunc(i, x));
    }
}

Answer 3

Maybe you should try to use while loop. Like this:

            while i < 15:
            //do something
            i += 1

For two variables: x, i with embeding:

            while x < 15:
                //do something
                while i < 15:
                    //do something2
                    i += 1
                x += 1

Hope I understand the problem correctly.

Answer 4

I guess @Mike spot the error on: your code is asynchronous. What does it mean?

So, let's suppose you have this loop:

for (i = 0; i < 10; i++) {
  console.log(i);
}

It will print this, right?

0
1
2
3
4
5
6
7
8
9

However, you do not print your value inside the loop directly, but as a follow-up operation to a promise. This makes this code asynchronous. It means that it does not have to execute at the exact moment you call it. I do not have Tesseract here so I will make my loop asynchronous using another very old trick, setTimeout():

for (i = 0; i < 10; i++) {
    setTimeout(function() {
      console.log(i);
    }, 0);
}

If I run it, I get this:

10
10
10
10
10
10
10
10
10
10

What happens is, when I pass the operation we want to do (in this case, printing the i value) to an asynchronous function (recognize().then() in your case, setTimeout() in my case) through a callback (function() {console.log(i);} in my example) the asynchronous function "schedules" the operation to execute as soon as possible, but this "soon" is not faster than the loop. So, the loop finishes executing but our callback is not called, not even once! Since you are not declaring i with let, it is a global variable, so there exists only one i. And since the loop finished, the value of the i variable is 10 already.

It used to be a hard thing to solve, but with ES6 it is quite straightforward: declare i with let!

for (let i = 0; i < 10; i++) {
    setTimeout(function() {
      console.log(i);
    }, 0);
}

The let-ed variable has a new binding at each iteration of the loop, so in practice you have 10 variables called i. The closure of your function will have access only to the one with the right value!