Category Archives: Technical Blog

Javascript: setTimeout() vs. window.requestAnimationframe()

Hello Newbies,

As JS evolves so quick, I always pay highly attention to the press’ year whenever I need to buy a JavaScript book.

Before 2011, most programmers use setTimeout( ) to make animation, because back then, window.requestAnimationframe() was not cross browser supported yet. After 2011, you could see people only use window.requestAnimationframe() to make animation. But I wonder, why do we use window.requestAnimationframe() with several other lines to make sure all browsers can perform correctly, rather than a simple line with setTimeout(). Today, I found the answer from Professional JS for Web Developers, on page 253.

” True intervals are rarely used in production environment because the time between the end of one interval and the beginning of the next is not necessarily guaranteed, and some intervals may be skipped. Using timeouts ensures that can’t happen. Generally speaking, it’s best to avoid intervals. “

Exercises before Udacity’s Arcade Game Project

My goal for this week is to tackle down Udacity’s Arcade Game Project. I’ve been reading a lot of chapters and watching a lot of videos regards to Object Oriented Programming, JavaScript. However, these are way too passive. Before I get into LocalStorage etc. advanced concepts, I need to finish several mini-projects which are mainly focusing on applying OOP.

For now, my Dynamic Quiz is functional as expected. However, it is not included much OOP. The missing features of my Dynamic Quiz is localStorage and layout. So, I am gonna take a break from there at this moment. Because I feel that I lack in OOP skill.

When I opened Arcade Game original files from Udacity, I really have no idea where to start or how to read these files. I read it carefully one time. Then, I began to know what are the functions doing there. However, I still have no idea what I should create. Fortunately, I found a series of tutorials from Youtube that was related to this project. Even I finished reading the videos, I am still stuck to start.

I remember that there is a similar project from Eloquent JavaScript, so I decided to do EJ’s exercises before I start Udacity’s Arcade Game.

Here is what I’ve learned from EJ’s exercises.

Chapter 5 Higher-Order Function.

Array.prototype.reduce()

Example: Sum up all values within an array

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6

Example: Flatten an array of arrays

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

Array.prototype.concat()

var alpha = ['a', 'b', 'c'],
    numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);

console.log(alphaNumeric); // Result: ['a', 'b', 'c', 1, 2, 3]

Constructors as Functions

Reading Professional JavaScript for Web Developers, in Chapter 6, the author was talking about the downside of Constructors is that methods are created once for each instance. So, person1 and person2 have a method called sayName(), but those methods are not the same instance of Function. So every time a function is defined, it’s actually an object being instantiated. Logically, the constructor actually looks like this:

function Personc(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = new Function(“alert(this.name)”);
}

The mechanics of creating a new instance of Function remain the same. Thus,

alert(person1.sayName == person2.sayName); //false   (p.183)

It’s possible to work around this limitation by moving the function definition outside of the constructor,

function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}

function sayName() {
alert(this.name);
}

**** Inside the constructor, the sayName property is set equal to the global sayName() function, since the sayName property now contains just a pointer to a function, both person1 and person2 end up sharing the sayName() function that is defined in the global scope. This solves the problem of having duplicate functions that do the same thing but also creates some clutter in the global scope by introducing a function that can realistically be used only in relation to an object. (p.184)

Reflection

Imagine that you are creating thousands of instances of Person, it saves you thousands of “instances” in your program.

The Prototype Pattern actually wipe out the downside of the Constructor Pattern.

For example,

function Person() {

}
Person.prototype.name = name;
Person.prototype.age = age;
Person.prototype.job = job;
Person.prototype.sayName = function() {
alert(this.name);
};

person1 and person2 are both accessing the same set of properties and the sameName () function.