Understanding JS code - Part -2

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
gautamz07
Forum Contributor
Posts: 331
Joined: Wed May 14, 2014 12:18 pm

Understanding JS code - Part -2

Post 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 ??
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: Understanding JS code - Part -2

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Understanding JS code - Part -2

Post 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.
User avatar
gautamz07
Forum Contributor
Posts: 331
Joined: Wed May 14, 2014 12:18 pm

Re: Understanding JS code - Part -2

Post by gautamz07 »

Thanks Buddy
Post Reply