Hitskin.com
Hello guys!
I took the liberty of creating this topic with the intention of together we can discuss on how to multi-task in JavaScript / jQuery (...)
This is of paramount importance to the codes that make intensive use of loops such as our chatbox for example!
So, here we go!
Basic introduction:
Loop: It can be defined as pieces of code that are repeated in a certain amount!
1 - Synchronous Loops: They are most common when repetition is small they do not hinder the performance of other codes, but they contain a lot of repetitions, they can catch the browser interface and slow down the execution of other scripts! As the lines of the following codes to loop will only be executed after the loop ends.
Running the code below on console and see that the first line to be executed is the console.log('start...');, then the synchronous "for loop" and then the last line console.log('End'); will be executed:
Ok, so far so good, it was quick does not it?
Now imagine our current model of the chat box, have you noticed that the messages "disappear" in an average of 15 minutes? If you leave the "archives" mode, you will see that the message list is great, but at the same time slow to appear completely!
What is the reason? : Synchronous Loop!
Or imagine a loop that has to look for something in an array of 10,000 entries !!! This locks out the browser interface and does not allow other code to run only when the loop ends...
2 - Assynchronous Loops: They are a little more complex, but nothing that would prevent us from to use them, it makes the running in shared mode as "multi task"!!!
Test the example below:
Have you noticed that the lines console.log('start...'); and console.log('End'); were executed before the loop is finished?! This is due to asynchronous loop!!! There are several implementations on the web, I did and I use this because it is simple and works perfectly.
Well, this is it guys, who want to contribute more information and codes, feel free!
JS
I took the liberty of creating this topic with the intention of together we can discuss on how to multi-task in JavaScript / jQuery (...)
This is of paramount importance to the codes that make intensive use of loops such as our chatbox for example!
So, here we go!
Basic introduction:
- Spoiler:
Because JavaScript is single-threaded, it's critical that time-intensive operations, like I/O operations, are all non-blocking, and asynchronous, so that these operations do not block the main application event loop. When something blocks in the event loop, no other application logic can run, and the application tends to grind to a complete halt. Long running operations should all be invoked asynchronously, and use some type of async completion callback when the operation has finished (or failed). Its also common to use progress callbacks for long running operations where incremental progress can be reported (e.g. percentage notifications for a large file copy operation). All of these types of callbacks are simply added to the event queue, and executed in a future turn of the event loop, so its critical that nothing blocks the event loop at any time.
Synchronous vs. Asynchronous Callback APIs:
One key aspect of callback APIs is that they can be either synchronous or asynchronous. It is often important to understand whether a callback will be invoked synchronously or asynchronously, because you may have successive code that should not be executed until after the callback-based API call has completed. With synchronous callback-based APIs, you typically don't need to do anything special to achieve the desired sequencing, because the callback function will be executed synchronously to completion, but with async callback APIs, you must often write your code in a different way to ensure the correct sequencing of calls.
Loop: It can be defined as pieces of code that are repeated in a certain amount!
1 - Synchronous Loops: They are most common when repetition is small they do not hinder the performance of other codes, but they contain a lot of repetitions, they can catch the browser interface and slow down the execution of other scripts! As the lines of the following codes to loop will only be executed after the loop ends.
Running the code below on console and see that the first line to be executed is the console.log('start...');, then the synchronous "for loop" and then the last line console.log('End'); will be executed:
- Spoiler:
- Code:
console.log('start ...');
var aArray = ['F', 'o', 'r', 'u', 'm', 'o', 't', 'i', 'o', 'n'];
for (var index = 0, len = aArray.length; index < len; index++) {
console.log(aArray[index]);
}
console.log('End');
Ok, so far so good, it was quick does not it?
Now imagine our current model of the chat box, have you noticed that the messages "disappear" in an average of 15 minutes? If you leave the "archives" mode, you will see that the message list is great, but at the same time slow to appear completely!
What is the reason? : Synchronous Loop!
Or imagine a loop that has to look for something in an array of 10,000 entries !!! This locks out the browser interface and does not allow other code to run only when the loop ends...
2 - Assynchronous Loops: They are a little more complex, but nothing that would prevent us from to use them, it makes the running in shared mode as "multi task"!!!
Test the example below:
- Spoiler:
- Code:
(function($) {
$.assyncFor = function(arr, callback) {
for (var i = 0, len = arr.length; i < len; ++i) {
var boundCallback = callback.bind(null, i, arr[i]);
setTimeout(boundCallback, i);
}
return this;
};
}(jQuery));
console.log('start...');
var aArray = ['F', 'o', 'r', 'u', 'm', 'o', 't', 'i', 'o', 'n'];
$.assyncFor(aArray, function(index, content) {
console.log(index, content);
});
console.log('End!');
Have you noticed that the lines console.log('start...'); and console.log('End'); were executed before the loop is finished?! This is due to asynchronous loop!!! There are several implementations on the web, I did and I use this because it is simple and works perfectly.
Well, this is it guys, who want to contribute more information and codes, feel free!
JS
Facebook
Twitter
Pinterest
Youtube
