Applying timed functions recursively

I am relatively new to JavaScript/jQuery, and cobbled together a script. Essentially, the script sets individual timers on specific DOM elements, and then recursively applies timed functions to them. The functions actually apply a "flip" effect to a div, showing a front and back, and then do different things on each side. The references to "Vague" are from Vague.js, and external library I didn't write that provides a blur effect to elements. The script works, but writing working code and writing good code are two separate things.

```
$(document).ready( function() {
$('.flipper').each(function(e) {
var flipper = new myFlipper($(this));
})
});

var myFlipper = function (flipper) {
//console.log(flipper);
this.flipper = flipper;
this.image = flipper.find('img');
this.blurStatus = true;
this.flipStatus = true;
this.Vague = this.image.Vague ({
intensity: 8,
forceSVGUrl: false
});
this.blurContext = $.proxy(this.myBlur, this);
this.flipContext = $.proxy(this.myFlip, this);
// $(this.image).on("click", this.blurContext);
var randomNumber = Math.floor(Math.random()*10);
var timer = randomNumber * 1000;
setTimeout(this.blurContext, timer);
}

myFlipper.prototype.myBlur = function(e) {
console.log(this.flipContext);
if(this.blurStatus) {
this.Vague.blur();
this.blurStatus = false;
this.flipper.find('.caption').animate({opacity: 1.0}, 3000);
setTimeout(this.flipContext,5000);
} else {
this.Vague.unblur();
this.blurStatus = true;
}
}

myFlipper.prototype.myFlip = function(e) {
console.log(this.flipper.attr("class"));
console.log(this.flipStatus);
if (this.flipStatus) {
this.flipper.addClass('hover');
this.flipper.find('.caption').animate({opacity: 0.0}, 1000);
this.blurContext();
this.flipStatus = false;
setTimeout(this.flipContext, 20000);
} else {
this.flipper.remov

This might not be an improvement per se, but you can change this:

$(document).ready( function() {
    $('.flipper').each(function(e) {
        var flipper = new myFlipper($(this));
    })
});

To this:

$(function() {
    $('.flipper').each(function(e) {
        var flipper = new myFlipper($(this));
    });
});

The reason this works is $() is a shortcut for $(document).ready().

With JavaScript, it is usually recommended that you keep from cluttering the global namespace. You currently have everything contained in var myFlipper, which is good. But since you're using jQuery, you might as well use a jQuery plugin, which would allow you to do something like this:

$.fn.myFlipper = function () {
    //...
};

$(function() {
    $('.flipper').myFlipper();
});

This way, you aren't introducing another variable into the global namespace. Plus, the jQuery plugin architecture affords you some additional benefits, like syntax, etc.

StackExchange Code Review Q#43526, answer score: 8