Async & Parallel in JavaScript

var result = load();
function load() {
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
return data;
};

function foo() {
setTimeout(function fn() {
result.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
}, 3000);
}
foo()
fn()

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

This API does not guarantee that timers will run exactly on schedule.
Delays due to CPU load, other tasks, etc, are to be expected.
console.log("a");
setTimeout(function () { console.log("c"); }, 500);
setTimeout(function () { console.log("d"); }, 500);
setTimeout(function () { console.log("e"); }, 500);
console.log("b");

var result = [];
load(result);
function load(result) {
result.concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
}, 3000);
};

var result;
load(function (data) {
result = data;
});
function load(callback) {
callback([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
}, 3000);
};

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);
}

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
setTimeout(function func() {
process(todo.shift());
if (todo.length > 0) {
setTimeout( func, 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?! :-)
});
});
});
});
});
“The problem isn’t with the language itself;
it’s with the way programmers use the
language — Async Javascript.”

var result;
result = data;
});
callback([1, 2, 3]);
}, 3000);
};
function load() {
return new Promise(
function (resolve,reject){
setTimeout(function(){
resolve([1, 2, 3]);
}, 3000);
});
}
var result;
var p = load();
p.then(function (data) {
result = data;
})

var p1 = action()
var p2 = p1.then(fs,fe)
var p3 = p2.then(fs,fe) P1
P2
P3
fefs
fefs
fefs
action()
Resolve Reject

new Promise(function( resolve, reject) {...})
.then(onFulfilled, onRejected);
Promise
Return one of three:
1. undefined
2. value
3. Promise (fulfilled)
Fulfilled
Return one of two:
1. Exception
2. Promise (rejected)
Rejected

// 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 };
})();

function doAsync() {
var promise = doSomethingAsync();
promise.then(...);
return promise;
}
function doAsync() {
var promise = doSomethingAsync();
return promise.then(...);
}

getJSON('story.json')
.then(function(story) {
return getJSON(story.chapterUrls[0]);
})
.then(function(chapter1) {
console.log("Got chapter 1", chapter1);
});
getJSON('story.json')
.then(function(story) {
getJSON(story.chapterUrls[0])
.then(function(chapter1) {
console.log("Got chapter 1", chapter1);
});
});

asyncThing1()
.then (function() { return asyncThing2(); })
.catch(function(err) { return asyncRecovery1(); })
.then (function() { return asyncThing4(); },
function(err) { return asyncRecovery2(); })
.catch(function(err) { console.log("Don't worry about it"); })
.then (function() { console.log("All done!"); });

asyncThing1()
.catch(function(err) { return asyncRecovery1(); })
.then (function() { return asyncThing4(); },
function(err) { return asyncRecovery2(); })
.catch(function(err) { console.log("Don't worry about it");
})
.then (function() { console.log("All done!"); });

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise(function (resolve, reject) {
setTimeout(resolve, 100, "foo");
});
Promise.all([p1, p2, p3])
.then(function (values) {
console.log(values); // [3, 1337, "foo"]
});

setTimeout(resolve, 500, "one");
});
setTimeout(resolve, 100, "two");
});
Promise.race([p1, p2]).then(function (value) {
console.log(value); // "two"
// Both resolve, but p2 is faster
});

function delay(time) {
return new Promise(function (resolve) {
setTimeout(resolve, time);
});
}

function timeout(promise, time) {
return Promise.race(
[
promise,
delay(time)
.then(function () {
throw new Error('Operation timed out');
})
]);
}

loadSomething().then(function(something) {
loadAnotherthing().then(function(another) {
DoSomethingOnThem(something, another);
});
});
q.all([ loadSomething() , loadAnotherThing() ])
.spread(function(something, another) {
DoSomethingOnThem(something, another);
});

var allTheCustomerThings;
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?! :-)
});
});
});
});
});

Q.spread([
getCustomer(id),
getContacts(id),
getOrders(id),
getAccountsRecv(id) ],
function (cust, contacts, orders, ar) {
cust.contacts = contacts;
cust.orders = orders;
cust.ar = ar;
}
);
});

function processArray(items, process, callback) {
} else {
callback(items);
}
}, 25);
}

function processArray(items, process) {
return new Promise(function( resolve , reject ){
var todo = items.concat();
} else {
resolve(items);
}
}, 25);
});
}
Process is
async?

// Option I
action();
.then(function(actionResult){});
// Option II
var result = await action();

// printDelayed is a 'Promise<void>'
async function printDelayed(elements: string[]) {
for (const element of elements) {
await delay(200);
console.log(element);
}
}
async function delay(milliseconds: number) {
return new Promise<void>(resolve => {
setTimeout(resolve, milliseconds);
});
}
printDelayed(["Hello", "beautiful", "world"]).then(() => {
console.log();
console.log("Printed every element!");
});

var result;
result = data;
});
callback([1, 2, 3]);
}, 3000);
};
var result;
var p = load();
p.then(function (data) {
result = data;
})
function load() {
var defer = $.Defered();
defer.resolve([1, 2, 3]);
}, 3000);
return defer.promise();
}

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

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
});

Observable
Subscribe
Observer

function action() {
return $http.get('/someUrl')
.then(function successCallback(response) { },
function errorCallback(response) { }
);
}

function action() {
return http.get('/someUrl')
.map(res => res.data.json());
}
action()
.subscribe(onNextFn, onErrorFn, onComplateFn );

http://jaredforsyth.com/rxvision/

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

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 (18)

Viewers also liked

Viewers also liked (20)

Similar to Async & Parallel in JavaScript

Similar to Async & Parallel in JavaScript (20)

More from Eyal Vardi

More from Eyal Vardi (9)

Recently uploaded

Recently uploaded (20)

Async & Parallel in JavaScript