CODEWITHSUNDEEP
javascriptjquery
Sameer Bakshi
Sameer Bakshi

Reputation: 53

jQuery code to be used as Javascript

There is a code that I found in one of the answers on this website. I would like to know if that code can be written in simple JS or not? Also, if someone can help me understand it in terms of simple Javascript I would really appreciate your help.

The code is to fix the time lost during changing of tabs in chrome for timing functions like setTimeout and setInterval.

The code goes like this - 

var div = $('div');
var a = 0;
var delay = (1000 / 30);
var now, before = new Date();


setInterval(function() {
    now = new Date();
    var elapsedTime = (now.getTime() - before.getTime());
    if(elapsedTime > delay)
        //Recover the motion lost while inactive.
        a += Math.floor(elapsedTime/delay);
    else
        a++;
    div.css("left", a);
    before = new Date();    
}, delay);

Please note that I am a newbie to this site and therefore with my current reputation I cannot comment on that answer of the question I am referring to.

Upvotes: 0

Views: 57

Answers (1)

Dmitriy
Dmitriy

Reputation: 3765

There are two jquery calls in the OP's question:

  1. $('div')
  2. div.css("left", a)

The first:
$('div') -> [].slice.call(document.querySelectorAll('div'))

Return a collection of matched elements either found in the DOM based on passed argument(s) - jQuery docs

It returns a collection (array) of elements matched by the selector 'div'. That means all div elements on the page.

Lets strip down the plain javascript part:

  • document.querySelectorAll('div') select all elements on the document with selector 'div'. The problem here is that querySelectorAll returns a NodeList, not an array. It's an array-like object.
  • [].slice returns a shallow copy of a portion of an array - MDN
    It can take an array like object (e.g. the result of querySelectorAll). The result is an actual array

At this point var div contains an array of all div elements on the page.

The second div.css("left", a)-> div.forEach(function (item) {item.style.left = a + 'px';})

set one or more CSS properties for every matched element - jQuery Docs

It sets a style attribute to an jQuery element. In this case, it sets the css left property to a. a is a number, jQuery appends 'px' to that number to make it a string.

Lets strip down the plain javascript part:

  • div.forEach() Loop over the div variable, which is now an array. For every item in the array, execute the following function:
  • function (item) { item.style.left = a + 'px'; } This function takes a parameter (item). This is the a dom element, which is stored in the div array. Every dom element has a styles object with css properties. This function takes the a variable (a number) concats 'px' to it and sets that to the left property.

So basically, this function loops over every item in the div array and sets the styles.left property to the a value.

The complete code would be:

var div = [].slice.call(document.querySelectorAll('div'));
var a = 0;
var delay = (1000 / 30);
var now, before = new Date();

setInterval(function() {
    now = new Date();
    var elapsedTime = (now.getTime() - before.getTime());
    if(elapsedTime > delay)
        //Recover the motion lost while inactive.
        a += Math.floor(elapsedTime/delay);
    else
        a++;
    div.forEach(function (item) {
         item.style.left = a + 'px';
    })
    before = new Date();    
}, delay);

Upvotes: 4

Related Questions