javascript

Chapter 18: Advanced Techniques
This code moves a < div > element to the right every time the timer code executes, stopping when the left
coordinate is at 200 pixels. It ’ s quite common to use this pattern for JavaScript animation.
Each browser window, tab, or frame has its own code execution queue. This means
that the timing of cross - frame or cross - window JavaScript calls may result in
race conditions when code is executed synchronously. Whenever this type of
communication is necessary, it ’ s a good idea to create a timer on the receiving frame
or window to execute the code.
Yielding Processes
JavaScript running in a browser has a finite amount of resources allocated to it. Unlike desktop applications,
which often have free rein over the amount of memory and processor time they can command, JavaScript is
severely restricted, to ensure that malicious web programmers can ’ t bring down a user ’ s computer. One of
these restrictions is the long-running script limit, which prevents code from running if it takes longer than a
certain amount of time, or a certain number of statements. If you reach that limit, the user is presented with a
browser error dialog indicating that a script is taking too long to execute and asking whether the user would
like to allow it to continue processing or stop. It ’ s the goal of all JavaScript developers to ensure that the user
never sees this confusing message from the browser. Timers are one way to work around this limitation.
Long - running script problems typically result from one of two issues: long, deeply nested function calls
or loops that are doing a lot of processing. Of these two, the latter is an easier problem to solve. Long -
running loops typically follow this pattern:
for (var i=0, len=data.length; i < len; i++){
process(data[i]);
}
The problem with this pattern is that the number of items to process is unknown until runtime. If
process() takes 100 milliseconds to complete, an array of two items may not be cause for worry, but an
array of 10 results in the script running for a second to complete. The amount of time it takes to
completely execute this loop is directly related to the number of items in the array. And since JavaScript
execution is a blocking operation, the longer a script takes to run, the longer users are left unable to
interact with the page.
Before unrolling the loop, you need to answer these two important questions:
1. Does the processing have to be done synchronously? If the processing of this data is blocking
something else from finishing, then you may not want to touch it. However, if you can answer a
definitive “ no ” to this question, then it ’ s a good candidate for deferring some processing until
later.
2. Does the data have to be processed sequentially? Oftentimes, an array of values is just a
convenient way to group and iterate over items regardless of the order. If the order of the items
has no significance, then it ’ s likely that you can postpone some processing until later.
602