Javascript loop question

[Sooda]

I did two identical functions, one without loop where I copy pasted code and it works as planned and another function where I used loop and it actually halts execution of program.
I am using Firefox canvas to create my electricity learning object.
This is function that works:

        function mysteryFunction(messageLayer)
        {
            isArrowOneVisible = arrowIndexVisible[0]
            isArrowTwoVisible = arrowIndexVisible[1]
            isArrowThreeVisible = arrowIndexVisible[2]
            isArrowFourVisible = arrowIndexVisible[3]
           
            udv_rangeStart[0] = 0
            udv_rangeEnd[0] = 3
           
            justDoIt(messageLayer, udv_rangeStart[0], udv_rangeEnd[0])
           
            arrowIndexVisible[0] = isArrowOneVisible
            arrowIndexVisible[1] = isArrowTwoVisible
            arrowIndexVisible[2] = isArrowThreeVisible
            arrowIndexVisible[3] = isArrowFourVisible
           
            udv_rangeStart[1] = 4
            udv_rangeEnd[1] = 7
           
            justDoIt(messageLayer, udv_rangeStart[1], udv_rangeEnd[1])
           
            arrowIndexVisible[0] = isArrowOneVisible
            arrowIndexVisible[1] = isArrowTwoVisible
            arrowIndexVisible[2] = isArrowThreeVisible
            arrowIndexVisible[3] = isArrowFourVisible
           
            udv_rangeStart[2] = 8
            udv_rangeEnd[2] = 11
           
            justDoIt(messageLayer, udv_rangeStart[2], udv_rangeEnd[2])
           
            // With next function execution display new sprite
            // there are 4 sprites total, with indexes from 0 to 3
            if (arrowIndex == 3)
            {
                arrowIndex = 0
            }
            else
            {
                arrowIndex++
            }       
        }

This one is supposed to use loop to do same thing though it fails:

        function UpdateValidSprites(messageLayer)
        {
            isArrowOneVisible = arrowIndexVisible[0]
            isArrowTwoVisible = arrowIndexVisible[1]
            isArrowThreeVisible = arrowIndexVisible[2]
            isArrowFourVisible = arrowIndexVisible[3]
           
            udv_rangeStart[0] = 0
            udv_rangeEnd[0] = 3
           
            udv_rangeStart[1] = 4
            udv_rangeEnd[1] = 7
           
            udv_rangeStart[2] = 8
            udv_rangeEnd[2] = 11
           
            for (index=0; index<=2; index++)
                {           
                    justDoIt(messageLayer, udv_rangeStart[index], udv_rangeEnd[index])
           
                    arrowIndexVisible[0] = isArrowOneVisible
                    arrowIndexVisible[1] = isArrowTwoVisible
                    arrowIndexVisible[2] = isArrowThreeVisible
                    arrowIndexVisible[3] = isArrowFourVisible
                   
                }
 
                   
                // With next function execution display new sprite
                // there are 4 sprites total, with indexes from 0 to 3
                if (arrowIndex == 3)
                {
                    arrowIndex = 0
                }
                else
                {
                    arrowIndex++
                }               
        }

I suspect loop runs in separate thread and it can't get variables in time. Pros maybe some tips?

 

[UnknowVector]

> halts execution of program

In what way? Does this crash? Does it appear to do nothing? What exactly is happening.

Those two snippets of code look equivalent to me. Are you sure that's all your changing?

> I suspect loop runs in separate thread and it can't get variables in time. Pros maybe some tips?

Why would you think this? The javascript interpreter won't magically try to make your code run in parallel. In fact, based on a quick Google search, it appears that javascript doesn't support threading in the first place. What's more, you couldn't run this code in parallel, because those arrowIndexVisible variables force each call to justDoIt to be executed in order.

Even if it was possible, and each iteration of the loop was running in a separate thread, the javascript interpreter would not fail to "get variables in time". If fetching the values of the variables took a significant amount of time, the thread would simply pause and then continue when the values were ready, just like in a single-threaded environment.

If the interpreter DIDN'T do things that way, then javascript would be non-deterministic, which would make it pretty much useless .

 

[Sooda]

I made it easy, head to page:
<link removed>
at page source line 474 I enabled mysteryfunc

to look page with loop function enabled look at:
<link removed>
at page source line 475 I enabled UpdateValidSprites function

Javascript takes timeeeee to load, if you wait little bit (~15 sec) and can't see anything hit browser refresh button or swap between open tabs/ maximize minimize browser window. Mysteryfunc page looks like this when fully loaded and arrows move on blue background:
<link removed>

Thanks for fast reply haven't see you long time ) I am no tech savvy, just wondering what is going on. I hope you don't need these images which make up sprite and kinetic-v3.9.4.js is 2d image display library (or something, Flash open source variant).

EDIT:
Problem solved, solution and script posted in this thread my last post. Weblinks are removed.

 

[phyrex1an]

Doesn't hang for me, however there is indeed an error.

The problem with the loop is that you never declare the variable index in the scope of the function so it will be a global variable (undeclared variables are global variables in javascript). Since you do the same mistake in several places in your code, the loop will exit after just one iteration.

for (var index=0; index<=2; index++)

is what you want. You have the same error in several places in your code.

Use https://developer.mozilla.org/en-US...ale=en-US&redirectslug=JavaScript/Strict_mode and a javascript lint to detect similar errors.

 

[Sooda]

Omg, Phyrex1an you are the best, thanks for answer and your time!
EDIT:
I used "use strict" keyword in my script tag start and fixed error messages given by Firefox Developer Error Console Errors. I fixed a lot of undelcared variables and moved global variable declaration at the top of script. Working code is here:

<!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script src="kinetic-v3.9.4.js"></script>
    <script>
        // Whole-script strict mode syntax
        "use strict";
       
        // DEFINE GLOBAL VARIABLES
        var arrowSpriteSrcpath =new Array();
        var arrowSpriteOne =new Array();
        var arrowSpriteTwo =new Array();
        var arrowSpriteThree =new Array();
        var arrowSpriteFour =new Array();
        var udv_messageLayer = null
        var arrowSpriteOneMaxIndex = 0
        var arrowSpriteTwoMaxIndex = 0
        var arrowSpriteThreeMaxIndex = 0
        var arrowSpriteFourMaxIndex = 0
        var arrowSpriteIndexStart = 0
       
        var udv_indexRange = new Array();
        var udv_indexRangeMaxIndex = 0
        var udv_indexRangeCounter = 0
        var udv_indexRangeShow = new Array();
       
        var udv_rangeStart = new Array();
        var udv_rangeEnd = new Array();
       
        var arrowIndex = 1
        var arrowIndexVisible =new Array();
       
        // DEBUG
        var udv_ison = 0
        var udv_debugimg
               
        function hidepic(layer, img)
            {
            img.hide();
            layer.draw();
            }
           
        function showpic(layer, img)
            {
            img.show();
            layer.draw();
            }
       
        function hideArrowSpriteOnes(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteOneMaxIndex; index++)
                {
                hidepic(messageLayer, arrowSpriteOne[index])
                }
        }
       
        function hideArrowSpriteTwos(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteTwoMaxIndex; index++)
                {
                hidepic(messageLayer, arrowSpriteTwo[index])
                }
        }
       
        function hideArrowSpriteThrees(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteThreeMaxIndex; index++)
                {
                hidepic(messageLayer, arrowSpriteThree[index])
                }
        }
       
        function hideArrowSpriteFours(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteFourMaxIndex; index++)
                {
                hidepic(messageLayer, arrowSpriteFour[index])
                }
        }
       
       
        function animateHideArrows(messageLayer, arrowIndex)
        {
            // Hide all sprites who's index is different
            if (arrowIndex != 0 && arrowIndexVisible[0] == 1)
            {
                hideArrowSpriteOnes(messageLayer);
                // update index visibility status to false
                arrowIndexVisible[0] = 0
            }
           
            if (arrowIndex != 1 && arrowIndexVisible[1] == 1)
            {
                hideArrowSpriteTwos(messageLayer);
                // update index visibility status to false
                arrowIndexVisible[1] = 0
            }
           
            if (arrowIndex != 2 && arrowIndexVisible[2] == 1)
            {
                hideArrowSpriteThrees(messageLayer);
                // update index visibility status to false
                arrowIndexVisible[2] = 0
            }
           
            if (arrowIndex != 3  && arrowIndexVisible[3] == 1)
            {
                hideArrowSpriteFours(messageLayer);
                // update index visibility status to false
                arrowIndexVisible[3] = 0
            }
        }
       
        function showArrowSpriteOnes(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteOneMaxIndex; index++)
                {
                showpic(messageLayer, arrowSpriteOne[index])
                }
        }
       
        function showArrowSpriteTwos(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteTwoMaxIndex; index++)
                {
                showpic(messageLayer, arrowSpriteTwo[index])
                }
        }
       
        function showArrowSpriteThrees(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteThreeMaxIndex; index++)
                {
                showpic(messageLayer, arrowSpriteThree[index])
                }
        }
       
        function showArrowSpriteFours(messageLayer)
        {
            var index = arrowSpriteIndexStart
            for (index; index<=arrowSpriteFourMaxIndex; index++)
                {
                showpic(messageLayer, arrowSpriteFour[index])
                }
        }
           
        function animateActiveArrows(messageLayer)
        {
            // It' s index 0 turn to be visible and currently
            // index 0 is invisible
            if (arrowIndex == 0 && arrowIndexVisible[0] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteOnes(messageLayer)
                arrowIndexVisible[0] = 1
            }
           
            // It' s index 1 turn to be visible and currently
            // index 1 is invisible
            if (arrowIndex == 1 && arrowIndexVisible[1] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteTwos(messageLayer)
                arrowIndexVisible[1] = 1
            }
           
            // It' s index 2 turn to be visible and currently
            // index 2 is invisible
            if (arrowIndex == 2 && arrowIndexVisible[2] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteThrees(messageLayer)
                arrowIndexVisible[2] = 1
            }
           
            // It' s index 3 turn to be visible and currently
            // index 3 is invisible
            if (arrowIndex == 3 && arrowIndexVisible[3] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteFours(messageLayer)
                arrowIndexVisible[3] = 1
            }
           
            //if (arrowIndex == 3)
            //{
            //    arrowIndex = 0
            //}
            //else
            //{
            //    arrowIndex++
            //}
        }
       
        // PASTE START
        function animateActiveArrows2(messageLayer)
        {
            // It' s index 0 turn to be visible and currently
            // index 0 is invisible
            if (arrowIndex == 0 && arrowIndexVisible[0] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteOnes(messageLayer)
                arrowIndexVisible[0] = 1
            }
           
            // It' s index 1 turn to be visible and currently
            // index 1 is invisible
            if (arrowIndex == 1 && arrowIndexVisible[1] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteTwos(messageLayer)
                arrowIndexVisible[1] = 1
            }
           
            // It' s index 2 turn to be visible and currently
            // index 2 is invisible
            if (arrowIndex == 2 && arrowIndexVisible[2] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteThrees(messageLayer)
                arrowIndexVisible[2] = 1
            }
           
            // It' s index 3 turn to be visible and currently
            // index 3 is invisible
            if (arrowIndex == 3 && arrowIndexVisible[3] ==0)
            {
                animateHideArrows(messageLayer, arrowIndex)
                showArrowSpriteFours(messageLayer)
                arrowIndexVisible[3] = 1
            }
           
            // With next function execution display new sprite
            // there are 4 sprites total, with indexes from 0 to 3
            if (arrowIndex == 3)
            {
                arrowIndex = 0
            }
            else
            {
                arrowIndex++
            }
        }
        // PASTE END
       
        function loadImg(stage, layer, srcpath, x1, y1, width1, height1)
          {
              var imageObj = new Image();
              var image = new Kinetic.Image({
            x: x1,
            y: y1,
            width: width1,
            height: height1,
            image: imageObj,
            visible: false,
            detectionType: "pixel"
          });
         
          // add the shape to the layer
          layer.add(image);
          imageObj.src = srcpath;
          //save image pixel data so that it can be detected
          image.saveData();
         
          /*
          * since we are adding the image to the layer after
          * the image loads, we need to redraw the layer because
          * it has now changed
          */
          layer.draw();
          return image;
        }
       
        function createArrowSpritesInLineX(x1, x2, y1, stage, messageLayer)
        {
            // CONSTANTS
            var spriteWidth = 100
            var spriteHeight = 50
           
            var xWidth = x2 - x1
            var xpos = x1
            var ypos = y1
           
           
            // Get last created sprite index
            var index = udv_indexRangeMaxIndex
            // Store old index count
            var oldIndex = udv_indexRangeMaxIndex
            // Store new range start
            udv_rangeStart[udv_indexRangeCounter] = index
            for (var index; xpos<=xWidth; index = index + 1)
                {
                // Add new sprites to sprite index
                // there are 4 arrys in parallel
                arrowSpriteOne[index] = loadImg(stage, messageLayer, arrowSpriteSrcpath[0], xpos, ypos, spriteWidth, spriteHeight);
                arrowSpriteOneMaxIndex = index
               
                arrowSpriteTwo[index] = loadImg(stage, messageLayer, arrowSpriteSrcpath[1], xpos, ypos, spriteWidth, spriteHeight);
                arrowSpriteTwoMaxIndex = index
               
                arrowSpriteThree[index] = loadImg(stage, messageLayer, arrowSpriteSrcpath[2], xpos, ypos, spriteWidth, spriteHeight);
                arrowSpriteThreeMaxIndex = index
               
                arrowSpriteFour[index] = loadImg(stage, messageLayer, arrowSpriteSrcpath[3], xpos, ypos, spriteWidth, spriteHeight);
                arrowSpriteFourMaxIndex = index
               
                xpos = xpos + spriteWidth
                }
                // Set last created sprite index as new index max
                udv_indexRangeMaxIndex = index
                // Store new range end
                udv_rangeEnd[udv_indexRangeCounter] = index
                // Return newly created index range
                return index - oldIndex
        }
       
        // PASTE START
        function justDoIt(messageLayer, start1, stop1)
        {
            arrowSpriteOneMaxIndex = 0
            arrowSpriteTwoMaxIndex = 0
            arrowSpriteThreeMaxIndex = 0
            arrowSpriteFourMaxIndex = 0
            arrowSpriteIndexStart = 0
                       
            var newMaxIndex = stop1
            arrowSpriteOneMaxIndex = newMaxIndex
            arrowSpriteTwoMaxIndex = newMaxIndex
            arrowSpriteThreeMaxIndex = newMaxIndex
            arrowSpriteFourMaxIndex = newMaxIndex
            arrowSpriteIndexStart = start1
           
            animateActiveArrows(messageLayer)
        }
       
       
        function mysteryFunction(messageLayer)
        {
            var isArrowOneVisible = arrowIndexVisible[0]
            var isArrowTwoVisible = arrowIndexVisible[1]
            var isArrowThreeVisible = arrowIndexVisible[2]
            var isArrowFourVisible = arrowIndexVisible[3]
           
            udv_rangeStart[0] = 0
            udv_rangeEnd[0] = 3
           
            justDoIt(messageLayer, udv_rangeStart[0], udv_rangeEnd[0])
           
            arrowIndexVisible[0] = isArrowOneVisible
            arrowIndexVisible[1] = isArrowTwoVisible
            arrowIndexVisible[2] = isArrowThreeVisible
            arrowIndexVisible[3] = isArrowFourVisible
           
            udv_rangeStart[1] = 4
            udv_rangeEnd[1] = 7
           
 
            justDoIt(messageLayer, udv_rangeStart[1], udv_rangeEnd[1])
 
           
            arrowIndexVisible[0] = isArrowOneVisible
            arrowIndexVisible[1] = isArrowTwoVisible
            arrowIndexVisible[2] = isArrowThreeVisible
            arrowIndexVisible[3] = isArrowFourVisible
           
            udv_rangeStart[2] = 8
            udv_rangeEnd[2] = 11
           
            justDoIt(messageLayer, udv_rangeStart[2], udv_rangeEnd[2])
           
            // With next function execution display new sprite
            // there are 4 sprites total, with indexes from 0 to 3
            if (arrowIndex == 3)
            {
                arrowIndex = 0
            }
            else
            {
                arrowIndex++
            }       
        }
       
        function debugme(img)
        {
            if (udv_ison == 0)
            {
                udv_ison = 1
                showpic(udv_messageLayer, img)
            }
            else
            {
                udv_ison = 0
                hidepic(udv_messageLayer, img)
            }
        }
       
        function resetGlobals()
        {
            arrowSpriteOneMaxIndex = 0
            arrowSpriteTwoMaxIndex = 0
            arrowSpriteThreeMaxIndex = 0
            arrowSpriteFourMaxIndex = 0
            arrowSpriteIndexStart = 0
           
            // Initialize animateActiveArrows func globals
            arrowIndex = 1
            // 0 is not visible, sprite 1
            arrowIndexVisible[0] = 0
            // 0 is not visible, sprite 2
            arrowIndexVisible[1] = 0
            // 0 is not visible, sprite 3
            arrowIndexVisible[2] = 0
            // 0 is not visible, sprite 4
            arrowIndexVisible[3] = 0
        }
       
        function UpdateValidSprites(messageLayer)
        {
            var isArrowOneVisible = arrowIndexVisible[0]
            var isArrowTwoVisible = arrowIndexVisible[1]
            var isArrowThreeVisible = arrowIndexVisible[2]
            var isArrowFourVisible = arrowIndexVisible[3]
           
            udv_rangeStart[0] = 0
            udv_rangeEnd[0] = 3
           
            udv_rangeStart[1] = 4
            udv_rangeEnd[1] = 7
           
            udv_rangeStart[2] = 8
            udv_rangeEnd[2] = 11
           
            //var index = 0
            for (var index = 0; index<=2; index++)
                {           
           
                    arrowIndexVisible[0] = isArrowOneVisible
                    arrowIndexVisible[1] = isArrowTwoVisible
                    arrowIndexVisible[2] = isArrowThreeVisible
                    arrowIndexVisible[3] = isArrowFourVisible
 
                    justDoIt(messageLayer, udv_rangeStart[index], udv_rangeEnd[index])
                   
                }
 
                   
                // With next function execution display new sprite
                // there are 4 sprites total, with indexes from 0 to 3
                if (arrowIndex == 3)
                {
                    arrowIndex = 0
                    //resetGlobals()
                }
                else
                {
                    arrowIndex++
                }
               
                // DEBUG
                debugme(udv_debugimg)               
        }
        // PASTE END
       
        function draw() { 
            var stage = new Kinetic.Stage({
            container: "container",
            width: 800,
            height: 600
        });
       
        var messageLayer = new Kinetic.Layer();
        var context = messageLayer.getContext();
       
        // add the layer to the stage
        stage.add(messageLayer);
        messageLayer.clear();
        context.font = "18pt Calibri";
        context.fillStyle = "black";
             
        // Anims pics paths
        arrowSpriteSrcpath[0] = "anims/arrow/arrow1.png" // arrow sprite 1 100x50
        arrowSpriteSrcpath[1] = "anims/arrow/arrow2.png" // arrow sprite 2 100x50
        arrowSpriteSrcpath[2] = "anims/arrow/arrow3.png" // arrow sprite 3 100x50
        arrowSpriteSrcpath[3] = "anims/arrow/arrow4.png" // arrow sprite 4 100x50
           
        // CREATE SPRITES IN LINE
        // Fill possible electrical pathway with 4 sprite variations and hide them
        // Store created sprite indexes in variable arry for
        // later enable/ disable show/ hide cycle
        udv_indexRange[udv_indexRangeCounter] = createArrowSpritesInLineX(150, 600, 150, stage, messageLayer) // x1, x2, y1
        // Show is 1 and don't show is 0, by default 0
        udv_indexRangeShow[udv_indexRangeCounter] = 1
        udv_indexRange[udv_indexRangeCounter] = 4
        udv_indexRangeCounter = udv_indexRangeCounter + 1
       
        // PASTE START
        udv_indexRange[udv_indexRangeCounter] = createArrowSpritesInLineX(150, 600, 300, stage, messageLayer) // x1, x2, y1
        // Show is 1 and don't show is 0, by default 0
        udv_indexRangeShow[udv_indexRangeCounter] = 1
        udv_indexRange[udv_indexRangeCounter] = 4
        udv_indexRangeCounter = udv_indexRangeCounter + 1
 
       
        udv_indexRange[udv_indexRangeCounter] = createArrowSpritesInLineX(150, 600, 450, stage, messageLayer) // x1, x2, y1
        // Show is 1 and don't show is 0, by default 0
        udv_indexRangeShow[udv_indexRangeCounter] = 1
        udv_indexRange[udv_indexRangeCounter] = 4
        //udv_indexRangeCounter = udv_indexRangeCounter + 1
        // PASTE END
       
        // Update Arrow animations
        // Initialize animateActiveArrows func globals
        arrowIndex = 1
        // 0 is not visible, sprite 1
        arrowIndexVisible[0] = 0
        // 0 is not visible, sprite 2
        arrowIndexVisible[1] = 0
        // 0 is not visible, sprite 3
        arrowIndexVisible[2] = 0
        // 0 is not visible, sprite 4
        arrowIndexVisible[3] = 0
       
        udv_messageLayer = messageLayer
        //udv_arrowSprite = arrowSprite
       
        // DEBUG START
        udv_debugimg = loadImg(stage, messageLayer, arrowSpriteSrcpath[0], 0, 0, 100, 50);
        showpic(messageLayer, udv_debugimg)
        // DEBUG END
       
        //setInterval(function() {mysteryFunction(udv_messageLayer)}, 2000);
        setInterval(function() {UpdateValidSprites(udv_messageLayer)}, 2000);
        //setInterval(function() {animateActiveArrows(udv_messageLayer)}, 2000);
        }
    </script>
  </head>
  <body onload="draw();" bgcolor = "blue">
    <div id="container"></div>
  </body>
</html>