Async & Parallel in JavaScript

// plain, non-jQuery version of hooking up an event handler
var clickity = document.getElementById("clickity");
clickity.addEventListener("click", function (e) {
//console log, since it's like ALL real world scenarios, amirite?
console.log("Alas, someone is pressing my buttons…");
});
// the obligatory jQuery version
$("#clickity").on("click", function (e) {
console.log("Alas, someone is pressing my buttons…");
});

link.onclick = function () {
clickHandler1.apply(this, arguments);
clickHandler2.apply(this, arguments);
};

$('input[type=submit]')
.on('click', function () { console.log('foo'); })
.trigger('click');
console.log('bar');
The output is:
foo
bar
whenever a jQuery event fires, all of its handlers will be executed sequentially
without interruption.

$('#tabby,#socks').on('meow', function () {
console.log(this.id + 'meowed');
});
$('#tabby').trigger('meow'); //"tabby meowed"
$('#socks').trigger('meow'); //"socks meowed"

var start = new Date;
setTimeout(function () {
var end = new Date;
console.log('Timeelapsed:', end - start, 'ms');
}, 500);
while (new Date - start < 1000) { };
What will be the result:
1. 500 < result < 1000
2. 1000 < result < 1500
3. 1500 < result

console.log("a");
setTimeout(function () { console.log("c"); }, 500);
setTimeout(function () { console.log("d"); }, 500);
setTimeout(function () { console.log("e"); }, 500);
console.log("b");

init
function init() {
$("#spinner").show();
setup();
$("#spinner").hide();
}
setup
hide
show

function init() {
$("#spinner").show();
setTimeout(
function() {
setup();
$("#spinner").hide();
}, 0);
}

try {
throw new Error('Catch me if you can!');
}, 0);
} catch (e) {
console.error(e);
}

Option I:
$.get('/data', {
success: successHandler,
failure: failureHandler
});
Option II
$.get('/data', function(error, value){
if(error) {
alert('error');
returen; // Don’t forget this !
}
});

worker.updateCustomer(currentCustomer, function (err, data) {
this.showAlert(err || data);
}.bind(notifier));
// using underscore/lodash
worker.updateCustomer(currentCustomer, _.bind(function (err, data) {
}, notifier));
// using jquery
worker.updateCustomer(currentCustomer, $.proxy(function (err, data) {
}, notifier));

worker.updateCustomer(currentCustomer, function (err, data) {
}.bind(notifier));
// using underscore/lodash
worker.updateCustomer(currentCustomer, _.bind(function (err, data) {
}, notifier));
// using jquery
worker.updateCustomer(currentCustomer, $.proxy(function (err, data) {
}, notifier));
var updateForm = {
submit: function () {
// get the data and store it in currentCustomer
worker.updateCustomer(
currentCustomer, this.showAlert.bind(this) );
},
showAlert: function (err, data) {
// I don't care how, just show an alert :-)
}
};

for (var i = 0, len = items.length; i < len; i++) {
process(items[i]);
}
function processArray(items, process, callback) {
var todo = items.concat(); //create a clone of the original
process(todo.shift());
if (todo.length > 0) {
setTimeout( arguments.callee, 25 );
} else {
callback(items);
}
}, 25);
}

var allTheCustomerThings;
$("#getCustomer").click(function (cust) {
var id = $("#cust-id").val();
getCustomer(id, function (cust) {
allTheCustomerThings = cust;
getContacts(id, function (contacts) {
allTheCustomerThings.contacts = contacts;
getOrders(id, function (orders) {
allTheCustomerThings.orders = orders;
getAccountsRecv(id, function (ar) {
allTheCustomerThings.ar = ar;
// OK - we got all the data, NOW WHAT?! :-)
});
});
});
});
});

$.get('/mydata', {
success: onSuccess,
failure: onFailure,
always: onAlways
});
var promise = $.get('/mydata');
promise.done(onSuccess);
promise.fail(onFailure);
promise.always(onAlways);

step1(function (value1) {
step2(value1, function (value2) {
// Do something with value4
});
});
});
}); Q.fcall(promisedStep1)
.then(promisedStep2)
.then(function (value4) {
// Do something with value4 })
.catch(function (error) {
// Handle any error from all above steps
})
.done();

// fictional viewmodel for a mobile login screen
// the ugly nested callback version
var loginViewModel = (function () {
var login = function () {
var username = $('#loginUsername').val();
var password = $('#loginPassword').val();
el.Users.login(
username,
password,
function () {
usersModel.load(
function () {
mobileApp.navigate(
'views/notesView.html',
function () { // YAY! We made it! },
function (err) { showError(err.message); });
},
},
};
}());

// Converted to use promises
var loginViewModel = ( function () {
var login = function () {
var username = $('#loginUsername').val();
var password = $('#loginPassword').val();
el.Users.login(username, password)
.then(function () { return usersModel.load(); })
.then(function () { mobileApp.navigate('views/notesView.html');})
.then(
null, // YAY! We made it!
function (err) { showError(err.message); }
);
};
return { login: login };
})();

$.when($.ajax("/get/mail/"))
.done( newMessages,
updateMessageList,
updateUnreadIndicator )
.fail(noMessages)
.always(
function () {
var date = new Date();
$("#lastUpdated")
.html( date.toDateString() );
}
);

varnanowrimoing = $.Deferred();
varwordGoal = 5000;
nanowrimoing.progress(function (wordCount) {
varpercentComplete = Math.floor(wordCount / wordGoal * 100);
$('#indicator').text(percentComplete + '%complete');
});
nanowrimoing.done(function () {
$('#indicator').text('Goodjob!');
});
$('#document').on('keypress', function () {
var wordCount = $(this).val().split(/s+/).length;
if (wordCount >= wordGoal) {
nanowrimoing.resolve();
};
nanowrimoing.notify(wordCount);
});

$("#getCustomer").click(function (cust) {
var id = $("#cust-id").val();
Q.spread([
getCustomer(id),
getContacts(id),
getOrders(id),
getAccountsRecv(id) ],
function (cust, contacts, orders, ar) {
cust.contacts = contacts;
cust.orders = orders;
cust.ar = ar;
}
);
});

var worker = new Worker('myThread.js');
worker.addEventListener('message',function(e){console.log(e.data);});
worker.postMessage('input message');
msg
//myThread.js
self.addEventListener( 'message' , doEcho );
function doEcho (e) { self.postMessage('Echo: ' + e.data) };
doEchoEcho

// Test if Dedicated Web Workers are available
if (window.Worker) { g_bDedicatedWorkersEnabled = true; }
// Test if Shared Web Workers are available
if (window.SharedWorker) { g_bSharedWorkersEnabled = true; }

worker.postMessage(
{data: int8View, moreData: anotherBuffer},
[int8View.buffer, anotherBuffer] );

importScripts('script1.js', 'script2.js');

 In Chrome, there's a nice page to view all of the created blob
URLs: chrome://blob-internals/
var blob = new Blob([
"onmessage = function(e) { postMessage('msg from worker'); }"]);
// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);
var worker = new Worker(blobURL);
worker.onmessage = function (e) { // e.data == 'msg from worker' };
worker.postMessage('msg'); // Start the worker

function onError(e) {
document.getElementById('error').textContent = [
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
].join('');
}
function onMsg(e) { ... }
var worker = new Worker('workerWithError.js');
worker.addEventListener('message', onMsg, false);
worker.addEventListener('error', onError, false);

var calculator = operative({
add: function (a, b) {
return a + b;
}
});
// Calc on web worker and return the result to UI thread.
calculator.add(1, 2, function (result) {
result; // => 3
});

when.map(srcs, loadImage)
.then(
function gotEm(imageArray) {
doFancyStuffWithImages(imageArray);
return imageArray.length; },
function doh(err) { handleError(err); } )
.then(
function shout(count) {
// This will happen after gotEm() and count
// is the value returned by gotEm()
alert('see my new ' + count + ' images?'); }
);

http://code.dougneiner.com/presentations/machina/

Observable
Subscribe
Observer

var observable =
CreateObservable( document.getElementById('button'), 'click')
.skip(2)
.take(2)
.select(function (evt) { return "button clicked"; });

var observer = Rx.Observer.create(
//onNext
function(evt){ alert(evt);},
//onError
function(err){ alert('error');},
//onComplete
function (){ alert('done'); }
);
observable.subscribe(observer);

MSFT
27.01
INTC
21.75
MSFT
27.96
MSFT
31.21
INTC
22.54
INTC
20.98
MSFT
30.73
from tick in ticks

MSFT
27.01
INTC
21.75
MSFT
27.96
MSFT
31.21
INTC
22.54
INTC
20.98
MSFT
30.73
27.01 27.96 31.21 30.73
21.75 22.54 20.98
from tick in ticks
group tick by tick.Symbol

MSFT
27.01
INTC
21.75
MSFT
27.96
MSFT
31.21
INTC
22.54
INTC
20.98
MSFT
30.73
from tick in ticks
group tick by tick.Symbol into company
from openClose in company.Buffer(2, 1)
[27.01, 27.96] [27.96, 31.21] [31.21, 30.73]
[21.75, 22.54] [22.54, 20.98]

MSFT
27.01
INTC
21.75
MSFT
27.96
MSFT
31.21
INTC
22.54
INTC
20.98
MSFT
30.73
from tick in ticks
let diff = (openClose[1] – openClose[0]) / openClose[0]
0.034 0.104 -0.015
0.036 -0.069

MSFT
27.01
INTC
21.75
MSFT
27.96
MSFT
31.21
INTC
22.54
INTC
20.98
MSFT
30.73
from tick in ticks
where diff > 0.1
0.034 0.104 -0.015
0.036 -0.069

MSFT
27.01
INTC
21.75
MSFT
27.96
MSFT
31.21
INTC
22.54
INTC
20.98
MSFT
30.73
from tick in ticks
where diff > 0.1
select new { Company = company.Key, Increase = diff }
Company = MSFT
Increase = 0.104

 Autocomplete (source) (demo)
 Canvas Painting (source) (demo)
 Drag and Drop (source) (demo)
 AMD and Require.js Integration (source) (demo)
 Time Flies Like an Arrow (source) (demo)
Link to Start with: Introduction to the Rx for JavaScript

function draw() { // Drawing code goes here }
setInterval(draw, 100);
function draw() {
setTimeout(draw, 100);
// Drawing code goes here
}
draw();

function draw() {
requestAnimationFrame(draw);
}
draw();
The frame rate
of your browser
and
computer, but
typically it’s
60fps.
The key difference here is
that you are requesting
the browser to draw your
animation at the next
available
opportunity, not at a
predetermined interval.

polyfill
var fps = 15;
function draw() {
requestAnimationFrame(draw);
}, 1000 / fps);
}
Frame rate

Asynchronous JS: Callbacks, Listeners, Control Flow Libs
and Promises
Five Patterns to Help You Tame Asynchronous JavaScript
The basics of Web Workers
How JavaScript Timers Work
http://creativejs.com/resources/requestanimationframe/

eyalvardi.wordpress.com

Async & Parallel in JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Async & Parallel in JavaScript

Similar to Async & Parallel in JavaScript (20)

More from Eyal Vardi

More from Eyal Vardi (20)

Recently uploaded

Recently uploaded (20)

Async & Parallel in JavaScript