Function problem in a for loop - Split text

[Visual-Q]

I'm having a difficulty adding a function in a for loop that I'm hoping someone can shed some light on. I've been modifying a pen by Jonathan that originally iterates over a split text array with a jquery each method. I need better control so I've changed it to a for loop but I'm getting unexpected results. 

 

In the attached code I show both versions. In the each loop at the top the function getOffsetValues called as value for left properly references the right $char array item and calculates the return.

 

In the for loop the function only refences the last item $char[6].  I console logged out ' i' to try and troubleshoot and it gives a value of 6 on each iteration. 

 

I would expect both versions of the code to do the same thing but it seems the for loop does not properly isolate to the desired iterations values like the each loop does.

 

//loop through all the chars and make them visible AND set cursor to their right at same time
$chars.each(function(i, el) {
  if(i>5){return};
  
  var $char = $(el),
      offset,
      width,
      height = $char.height() + ($char.height() * .125);
  
   
  tl.set($char, {
    autoAlpha: 1,
    display:'inline-block',
  }, ((i + 1) * cursorInterval));
  
  tl.set($cursor, {
    left: getOffsetValues, //function called here calculates values on proper $char[i] array item
    top:  height
  }, (i + 1.1) * cursorInterval);
  
   function getOffsetValues(){
     offset = $char.offset();
     width = $char.width();
     return offset.left + width;  
    }

});

for(i = 0; i < 6; i++ ){
    var $char = $($chars[i]), //$char element defined
      offset,
      width,
      height = $char.height() + ($char.height() * .125);
  
 
  tl.set($char, {
    autoAlpha: 1,
    display:'inline-block',
  }, ((i + 1) * cursorInterval));
  
  tl.set($cursor, {
    left: getOffsetValues, //function called here calculates values on $char[6] on every iteration
    top:  height
  }, (i + 1.1) * cursorInterval);
  
  
   function getOffsetValues(){
     console.log(i);      //returne 6 each time it's called in timeline should be 0 1 2...6
     offset = $char.offset();
     width = $char.width();
     return offset.left + width;  
    }
  
}

 

[Dipscom]

A reduced example would go a long way to help solving this mystery.

 

A cursory look of the example code does not yield any obvious issues. I'm working on the assumption you do not have both of those loops in the same block of code.

 

Also, I would move the getOffsetValues outside the looping blocks, there isn't a need for them to be there. You can just pass arguments to it.

 

I don't have the spare time at the moment to set a test up for you but I will be more than happy to come back and have a look at any reduced case you might have.

[OSUblake]

12 hours ago, Visual-Q said:

In the for loop the function only refences the last item $char[6].  I console logged out ' i' to try and troubleshoot and it gives a value of 6 on each iteration. 

 

I would expect both versions of the code to do the same thing but it seems the for loop does not properly isolate to the desired iterations values like the each loop does. 

 

 

Variables aren't scoped in a for loop.

https://stackoverflow.com/questions/790558/variable-scope-in-javascript-for-loop

 

That's what the new let and const statements can be used for. So you can either use those (just be sure to use a transpiler like Babel to support older browsers).

 

for(let i = 0; i < 6; i++ ){
  ...  
  function getOffsetValues(){
    console.log(i);
  }  
}

 

 

Or do everything inside a function. That's what your jQuery each loop is doing.

 

for(var i = 0; i < 6; i++ ){
  setChars(i);  
}
  
function setChars(i) {
  ...
  function getOffsetValues() {
    console.log(i);
  }
}

 

[Visual-Q]

Thanks Blake!

 

I get the problem now. I always assumed events inside a for loop isolated scope on each iteration just like a function does. 

 

This bit of knowledge will definitely help me moving forward.

 

Apologies for not making a pen to demostrate this. It was  an excerpt of  a larger code block that would have been time consuming to setup in codepen, and I figured it was probably just a common scoping issue or an issue with applying onComplete that one of the gurus could spot pretty quickly. Which you did.