keep for loop from executing in Javascript

Question

Currently for loop gets executed till the end even though the function it calls hasn't finished executing. I want to make it such that, when startloop function is called until it is executed completely for loop shouldn't move forward.. How to do that? I tried simulating goto but it didn't work..

Here's my code:

function startLoop(i) {
  console.log("startloop function start");
  var centerX = xObj[i];
  var centerY = yObj[i];
  var radius = 10;

  var alpha = 1, /// current alpha value
    delta = 0.01; /// delta = speed
  var flag = 0;
  var num = 0

  function loop() {
    console.log("inside loop " + centerX + " " + centerY);
    alpha -= delta;
    if (alpha <= 0) {
      //console.log("heya_amigoes");
      num = 2;
      return;
    }
    //console.log("hi1");
    /// clear canvas, set alpha and re-draw image
    ctx2.clearRect(0, 0, 1000, 600);
    ctx2.globalAlpha = alpha;
    ctx2.beginPath();
    ctx2.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx2.fillStyle = "#FF0000";
    ctx2.fill();
    ctx2.lineWidth = 1;
    ctx2.strokeStyle = '#003300';
    ctx2.stroke();

    //console.log("hi2");
    //requestAnimationFrame(loop); // or use setTimeout(loop, 16) in older browsers
    setTimeout(loop, 16)
    console.log("Outside function loop");
  }

  loop();

  /*  
     LABEL1: do {
          if(num==2)
              {
              num=0;
              break LABEL1;
              }
          if(num!=2)
              continue LABEL1;
      }while(1);
  */

  console.log("startloop function stop");
}

for (i = 0; i < xObj.length; i++) {
  console.log("for loop running " + i);
  startLoop(i);
  console.log("outside loop func");
}

Please click the <> and the rest of the html to show a minimal reproducible example - it is currently not clear at all what your expected and actual output is — mplungjan
– mplungjan, Commented Apr 21, 2017 at 5:49
You will have to use recursion and function callbacks for it — Rajesh Dixit
– Rajesh Dixit, Commented Apr 21, 2017 at 5:51
@SarathSadasivanPillai - making a snippet means making working code! — mplungjan
– mplungjan, Commented Apr 21, 2017 at 5:57

Rajesh Dixit · Accepted Answer · 2017-04-22 05:32:16Z

1

A for loop will not wait for your task. To achieve this task, you will have to use recursion.

Logic:

Call a function and pass a callback in it.
On execution completion, run passed callback.
Now since we have to chain same function again and again, pass same callback to next iteration again and have a check(threshold limit) and stop on breach.

var count = 0

function test1(i, cb){
  console.log("In Test " + i)
  if(i < 10)
    setTimeout(cb.bind(null, ++count, cb), 2000)
}


test1(count, test1)

Explanation:

My approach mimics behaviour of a do..while loop. It has 4 parts:

Initialisation: This will initialise the iterator variable. This variable will be use to check for termination condition and to check the current iterator's value. In my Case: count = 0
Execution of Code block: This will execute the code defined inside {...}. In my case: test1(count, test1)
Termination condition: This check if next iteration should be performed or not? In my case: if(i<10). If condition is satisfied, start next iteration: setTimeout(cb.bind(null, ++count, cb), 2000)
Increment Value: This updated value of iterator to point to next value. In my case: ++count

This is the final JSFiddle

edited Apr 22, 2017 at 5:32

answered Apr 21, 2017 at 6:02

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

jeff lockhart Over a year ago

Hey can you plz explain how your code snippet is working plz? what does the initLoop do? and how can i use this in my code?

jeff lockhart Over a year ago

ok I am trying to do that.. and the function test1 gets replaced by my second function loop?

jeff lockhart Over a year ago

jsfiddle.net/1o3e8sbs Hey check this fiddle out. I tried using your code with a for loop just to check if it works but it is giving unexpected results..

jeff lockhart Over a year ago

Also i think, instead of using for loop, i can set the length to a variable say x and using your code i can check that, if(i<x) maybe? and pass the value of next i to get the desired co-ordinates?

Rajesh Dixit Over a year ago

Please check the update. Have added explanation and made code snippet little more simple.

Community · Accepted Answer · 2017-05-23 11:54:34Z

0

I think that the problem going to be with your for loop. startLoop function always going to get the xObj.length-1.

You can read more about this problem: JavaScript closure inside loops – simple practical example

The variable i, within each of your anonymous functions, is bound to the same variable outside of the function.

Solution with ES6 let feature:

for (let i = 0; i < xObj.length; i++) {
  console.log("for loop running " + i);

  startLoop(i);

  console.log("outside loop func");

}

Solution without ES6:

var funcs = [];

for (var i = 0; i < xObj.length; i++) {
  funcs[i] = startLoop(i);
}

for (var i = 0; i < xObj.length; i++) {
  console.log("for loop running " + i);

  funcs[i]();

  console.log("outside loop func");

}

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 21, 2017 at 6:20

Peter Kota

8,3905 gold badges29 silver badges53 bronze badges

1 Comment

jeff lockhart Over a year ago

no this is not the case as i am passing the value of i and getting the values inside the function.. problem is it's not one after one. it keeps getting executed one by one with decreasing alpha value

Collectives™ on Stack Overflow

keep for loop from executing in Javascript

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related