CODEWITHSUNDEEP
javascriptjquery
the12
the12

Reputation: 2415

When are variables set in JavaScript?

I found a basic JQuery carousel online and was curious why it worked, when in my mind, depending on when the variable was processed, it maybe should not have.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<style>
.carousel div {
    position:absolute;
    z-index: 0;
}
.carousel div.previous {
    z-index: 1;
}
.carousel div.current {
    z-index: 2;
}

.navicon{
width:50px;
height: 50px;   
}

</style>
</head>
<body><script   src="https://code.jquery.com/jquery-2.2.4.js"   integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="   crossorigin="anonymous"></script>


<div class = "carousel">
  <div class = "current"><img src="http://placehold.it/500x500" alt=""></div>
  <div><img src="http://placehold.it/501x501" alt=""></div>
  <div><img src="http://placehold.it/502x502" alt=""></div>
  <div><img src="http://placehold.it/503x503" alt=  ""></div>
</div>
</body>
</html>

JavaScript:

  $(function(){
    setInterval(rotateImages, 3000);


  });

  function rotateImages(){
    var currentPhoto = $('.carousel div.current');
    var nextPhoto = currentPhoto.next();
    if (nextPhoto.length == 0){
      nextPhoto = $('.carousel div:first-of-type')
    }
//Point A

  currentPhoto.removeClass('current').addClass('previous');
//Point B
  nextPhoto.css({ opacity: 0.0 }).addClass('current')
            .animate( {opacity: 1.0}, 1000, function(){
            currentPhoto.removeClass('previous')
            });
  };

What I mean by variable setting is when does JavaScript set the variable, in this case, the variable nextPhoto to a certain selector i.e.: the preceding div after it.

My confusion stems over the fact that if at point B JavaScript sets the selector there, then the equation would not work, because in the previous step, you have removed the element with the class "current", hence when JavaScript ties to set the variable nextPhoto, it shouldn't be able to find anything because at that point in time, there would be no element with the class current, hence no preceding element (nextPhoto = currentPhoto.next()).

If it is at Point A it makes sense, but I'm wondering at what point in the equation does JavaScript set the variable so that I can design equations with that in mind. If you could tell me via the code above and writing what point does JS set variables that would be great!

Upvotes: 0

Views: 89

Answers (4)

Dayo Greats
Dayo Greats

Reputation: 25

JavaScript stores variable as data container.

As soon as the DOM is ready, currentPhoto and nextPhoto are already being set and stored into defined names because of = as seen below.

 var currentPhoto = $('.carousel div.current'); #-> This element knows it's current
 var nextPhoto = currentPhoto.next(); #-> This element knows it's next in line

Below changes class status of curent div only by changing its image stacking from current(z-index=3) to previous(z-index=2). Next div in line status is still intact in its state as nextPhoto.

 currentPhoto.removeClass('current').addClass('previous');

In nextPhoto intact state, it's still waiting for its operational instructions to be set to class = 'Current' And that happened here:

 nextPhoto.css({ opacity: 0.0 }).addClass('current')
        .animate( {opacity: 1.0}, 2000, function(){
        currentPhoto.removeClass('previous')
        });
 };

To really see this in action. Change setInterval(from 3000 to 7000) and also change animate(from 1000 to 2000). Then Run your script and watching it through chrome inspector.

Increasing the timing will make you see at the points those variables where set.

Upvotes: 0

Robert Wade
Robert Wade

Reputation: 5003

I think you're a little confused about the actual object vs. the object having a particular class. Just below where you indicate "Point A" you are only removing a class from the currentPhoto object. You are not removing the object. It still exists throughout the method, it just no longer has the 'current' class. Read the following comments down the line. That is the order that things are executed, and should explain it thoroughly.

$(function(){ // when the document is ready do the following:
    setInterval(rotateImages, 3000); // every 3000 ms do rotateImages
  });

  function rotateImages(){

    // create a variable for currentPhoto which is an object in .carousel that
    // is a div with class current
    var currentPhoto = $('.carousel div.current');

    // create a variable for nextPhoto which is the next sibling to 
    // currentPhoto which you just set.
    var nextPhoto = currentPhoto.next();

    // if there is no next photo, currentPhoto must be the last one, so set
    // nextPhoto to the first photo so the carousel loops.
    if (nextPhoto.length == 0){
      nextPhoto = $('.carousel div:first-of-type')
    }

    // the next line removes the current class and adds the class previous
    // keep in mind that the object is still currentPhoto though, regardless
    // of what classes it has.
    currentPhoto.removeClass('current').addClass('previous');

    // animate the nextPhoto object to have zero opacity and go ahead and
    // add the 'current' class.  At this point it is still the nextPhoto
    // object regardless of what classes it has.
    nextPhoto.css({ opacity: 0.0 }).addClass('current')
        .animate( {opacity: 1.0}, 1000, function(){
            // when the animation is complete, remove the previous class
            // from the currentPhoto object.
            currentPhoto.removeClass('previous')
    });

    // Ok so if you've kept up, that was the first time through setInterval
    // Now the next time it runs the currentPhoto object will be redefined 
    // because it's going to be set as the element that has the current class
    // which at this point is now the nextPhoto object.
  };

Upvotes: -1

BJ Black
BJ Black

Reputation: 2531

As soon as you do the first assignment:

var currentPhoto =...

currentPhoto is a point-in-time snapshot of the selector's state. Future changes to the set do nothing to change that set. Your .next() call will pull the very next item no matter what, unless you explicitly change the content of currentPhoto itself (not it's deep data).

nextPhoto will get the new classes as they are assigned, but the selector itself has already been run.

Upvotes: 2

Sam Axe
Sam Axe

Reputation: 33738

currentPhoto and nextPhoto are assigned when the assignment operator, =, sets them to something. In this case the first two lines of the rotateImages function.

Upvotes: 1

Related Questions