Page 1 of 1

Understanding JS code - Part -2

Posted: Fri Nov 14, 2014 11:40 pm
by gautamz07

Code: Select all

/**
 * jQuery Unveil
 * A very lightweight jQuery plugin to lazy load images
 * http://luis-almeida.github.com/unveil
 *
 * Licensed under the MIT license.
 * Copyright 2013 Luís Almeida
 * https://github.com/luis-almeida
 */

;(function($) {


  $.fn.unveil = function(threshold, callback) {

    var $w = $(window),
        th = threshold || 0,
        retina = window.devicePixelRatio > 1,
        attrib = retina? "data-src-retina" : "data-src",
        images = this,
        loaded;

    this.one("unveil", function() {
      var source = this.getAttribute(attrib);
      source = source || this.getAttribute("data-src");


      if (source) {
        this.setAttribute("src", source);
        if (typeof callback === "function") callback.call(this);
      }
    });

    function unveil() {
      var inview = images.filter(function() {
        var $e = $(this);
        [color=#FF0000]if ($e.is(":hidden")) return;[/color]

        var wt = $w.scrollTop(),
            wb = wt + $w.height(),
            et = $e.offset().top,
            eb = et + $e.height();
            console.log(wt);
            console.log(wb);
            console.log(et);
            console.log(eb);

        [color=#FF0000]return eb >= wt - th && et <= wb + th;[/color]
      });

      loaded = inview.trigger("unveil");
      images = images.not(loaded);
    }

    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

    unveil();

  return this;

  };

})(window.jQuery || window.Zepto);

I have a few questions about the above code , sorry for posting the entire code , but I just wanted there to be no missing bits .

In the code above there are three instances where the return statement is used (marked in red), now I quite don’t understand the usage of return statement , i.e. I don’t quite understand whom they are returning what .

The first return statement :

Code: Select all

if ($e.is(":hidden")) return; 
what Is it retuning ??? and to whom ???

the second return statement :

Code: Select all

return eb >= wt - th && et <= wb + th;
and to whom is it returning ???


the third return statement :

Code: Select all

return this;


returning what to whom ??

Re: Understanding JS code - Part -2

Posted: Sat Nov 15, 2014 3:50 am
by requinix
gautamz07 wrote:The first return statement :

Code: Select all

if ($e.is(":hidden")) return; 
what Is it retuning ??? and to whom ???
It is not returning anything, and it is returning to whomever called it. There's so many "unveil"s in there, I lost track what is calling what.
gautamz07 wrote:the second return statement :

Code: Select all

return eb >= wt - th && et <= wb + th;
and to whom is it returning ???
Again, to whomever called it. The same "whomever" as from the first return.
gautamz07 wrote:the third return statement :

Code: Select all

return this;


returning what to whom ??
It's returning "this", which is a very important thing in Javascript to know about so if you don't know what it is then you should learn about it immediately.
What it's returning to is a question regarding jQuery: by using its extending functionality (adding a function to $.fn) the function can act like other jQuery functions, and generally they'll return "this" so you can chain function calls together - again, like other jQuery functions.

Re: Understanding JS code - Part -2

Posted: Sun Nov 16, 2014 9:12 pm
by Weirdan
First two returns are in a callback passed to $.filter(), so they are used to signal the generic filtering algorithm whether to keep or discard currently filtered item from the resulting set. That 'filter' part selects only those images that are currently displayed.

Re: Understanding JS code - Part -2

Posted: Tue Nov 18, 2014 1:11 am
by gautamz07
Thanks Buddy