How to use OOP in jQuery/Javascript to pass a value cross-browser compatible out of a function?

Question

This may be asked several times, but I need it ASAP for a production-environment and I am totally overwhelmed by which objects I could create and use.

function scroll(min, max) {
  // do stuff
}

function scrollmore() {
  min += 10;
  max += 10;
  // do more stuff
}

I will accept an answer which guides me on the right path through a link or an explicit answer (which works). ;)

Answer 1

One way to take an OOP approach to this might be something like this. The min and max values are members of the object stored in objVar. This is very much like the object representing the min and max values you were looking for. Why not take it a step or two further, though?

We can include the inScroller() function. Now, since it's a part of the object, it can access objVar.min and objVar.max directly and doesn't need to have them passed to it. You can just call objVar.inScroller(); and it will operate on the variables objVar.min and objVar.max.

So what about incrementing by 10? Extending that same concept, we can create a function that increments the objVar.min and objVar.max variables and simply call it thusly: objVar.increment();.

Next time that objVar.inScroller(); is called, objVar.min and objVar.max will have been incremented by 10 each. You could even put 'em in a loop, like:

for (int i=0;i<totalRuns;i++) { objVar.inScroller(); objVar.increment(); }

The Object:

var objVar = new function() {
    this.min = 0;
    this.max = 10;
    this.increment() = function() { min += 10; max += 10; }


    this.inScroller = function() {
        for (var i=min;i<max;i++) {
            var pic = $('.scrolling p')[i],
            pic = $(pic).text(),
            var img = $('<img />').attr("src","img/profile/" + pic).css('display','none');
            $('.pfiles').append(img);
            $('img').load(function() {
                $(this).fadeIn(400)
            });
    }
}

Finally, it's called thusly:

$(window).scroll(function() {
    if ($(window).scrollTop() + window.innerHeight >= $('.pfiles').height() && $('.scrolling p').length > $('.pfiles img').length) {
        objVar.increment();
        objVar.inScroller();
    }
});

Or even thusly:

$(window).scroll(function() {
    if ($(window).scrollTop() + window.innerHeight >= $('.pfiles').height() && $('.scrolling p').length > $('.pfiles img').length) {
        for (int i=0;i<totalRuns;i++) { objVar.inScroller(); objVar.increment(); }
    }
});