1. S53
#4
4-1 Sync, ASync
4-2 Image
4-3 ajax
4-4 script
2012.11.07 20:30 ~ 22:30

2. Sync, OrderCycle Async
a = 3; Order1 Order1
while( a++ < 100);
start - wait - end start - wait - end
alert( a );
Order2 a = 3; Order2
start - wait - end run( end ); start - wait - end
b = 3;
Order3 function end(){
alert( a );
Order3
start - wait - end } start - wait - end
Listener
start - wait - end

3. Sync
Order1 a = 3; Order1
start - wait - end while( a++ < 100); start - wait - end
alert( a );
Order2 Order2
a = 3;
start - wait - end loop - break
while( 1 ){
if( a++ == 100 )
break;
Order3 }
Order3
start - wait - end alert( a ); start - wait - end

4. Sync
a = 3; Order1
function loop(){
start - wait - end
if( a++ == 100 ){
next();
}else{
setTimeout( loop, 1 );
}
Order function2
a = 3;
} timer
loop(); while( 1 ){
if( a++ == 100 )
function next(){ break;
alert( a ); }
} Order function3
alert( a );

5. Async
a = 3; a = 3;
function loop(){ function loop( $end ){
if( a++ == 100 ){ if( a++ == 100 ){
next(); $end();
}else{ }else{
setTimeout( loop, 1 ); setTimeout( loop, 1 );
} }
} }
loop(); loop( next );
function next(){ function next(){
alert( a ); alert( a );
} }

6. Image
Create Image Element
1. <img id="id"/> | var img = document.getElementById( 'id' );
2. var img = document.createElement( 'img' );
3. var img = new Image;
Start Networking
img.src = url
OnLoad
img.onload = function(){..};
complete
img.complete == true

7. Image
if( window['HTMLCanvasElement'] ){ if( window['HTMLCanvasElement'] ){
function onload( img, complete ){
//onload img.onload = function(){
}else{ complete( img );
//img.complete };
}
} }else{
function onload( img, complete ){
function check(){
if( img.complete ){
complete( img );
var img = new Image; }else{
setTimeout( check, 10 );
onload( img, function( $img ){ }
alert( $img ); }
} ); check();
}
}

8. Image
function ImageLoader( $complete ){ if( window['HTMLCanvasElement'] ){
function loaded( $img ){ function onload( img, complete ){
arg[arg.indexOf( $img.src )] = $img; img.onload = function(){
if( ++count == arg.length ){ complete( img );
$complete( arg ); };
} }
} }else{
function onload( img, complete ){
var i, j, img, arg, count; function check(){
arg = Array.prototype.slice.call( arguments, 1 ); if( img.complete ){
count = 0; complete( img );
for( i = 1, j = arguments.length ; i < j ; i++ ){ }else{
img = new Image; setTimeout( check, 10 );
onload( img, loaded ); }
img.src = arguments[i]; }
} check();
} }
}
ImageLoader( complete, 'a.jpg', 'b.jpg', 'c,jpg' );
function complete( $images ){
alert( $images.length );
}

9. ajax
Create xhr load
var xhr; function onload( $xhr, $complete ){
if( $w['XMLHttpRequest'] ){ var timer;
xhr = function(){ $xhr.onreadystatechange = function(){
return new XMLHttpRequest; if( $xhr.readyState != 4 ) return;
}; if( timer < 0 ) return;
}else{ clearTimeout( timer ), timer = -1;
xhr = ( function(){ if( $xhr.status == 200 || $xhr.status == 0 ){
var temp, i, j; $complete( $xhr.responseText, $xhr );
temp = [ }else{
'Microsoft.XMLHTTP', $complete( null, $xhr );
'MSXML2.XMLHTTP', }
'MSXML2.XMLHTTP.3.0', };
'MSXML2.XMLHTTP.4.0', timer = setTimeout( function(){
'MSXML2.XMLHTTP.5.0' if( timer < 0 ) return;
]; timer = -1;
i = temp.length; if( $ complete ) $complete( null, $xhr );
while( i-- ){ }, 10000 );
try{ }
j = temp[i]; function loader( $url, $complete ){
new ActiveXObject( j ); var loader;
}catch( $e ){ loader = xhr();
continue; onload( loader, $complete );
} loader.open( 'GET', $url, true );
break; loader.send('');
} }
return function(){
return new ActiveXObject( j ); loader( 'data.php', oncomplete );
}; function oncomplete( $data ){
} )(); alert( $data );
} }

10. ajax
sync async
function loader( $url, $complete ){ function loader( $url, $complete ){
var loader; var loader, timer;
loader = xhr();
onload( loader, $complete ); timer = setTimeout( function(){
loader.open( 'GET', $url, true ); if( timer < 0 ) return;
loader.send(''); timer = -1;
} if( $ complete ) $complete( null, $xhr );
}, 10000 );
loader = xhr();
loader.open( 'GET', $url, false );
loader.send('');
if( $xhr.readyState == 4 && timer > -1 ){
clearTimeout( timer ), timer = -1; {
if( $xhr.status == 200 || $xhr.status == 0 ){
$complete( $xhr.responseText, $xhr );
}
}
$complete( null, $xhr );
}

11. script
onload scriptLoader
if( window['addEventListener'] ){ function scriptLoader( $url, $complete ){
onload = function( $script, $complete ){ var scr, i;
$script.onload = function(){ scr = document.createElement( 'script' );
$script.onload = null; scr.type = 'text/javascript';
$complete( $script.src ); scr.charset = 'utf-8';
}; onload( scr, $complete );
}; document.getElementsByTagName( 'head' )[0]
}else{ .appendChild( scr );
onload = function( $script, $complete ){ scr.src = $url;
$script.onreadystatechange = function(){ }
switch( $script.readyState ){
case'loaded':case'complete': scriptLoader( 'jq.js', oncomplete );
$complete(); function oncomplete( $url ){
} alert( 'loaded:' + $url );
}; }
}
}

12. script
bulkScriptLoader scriptLoader
function buldScriptLoader( $complete ){ function scriptLoader( $url, $complete ){
function loaded( $url ){ var scr, i;
if( ++count == total ){ scr = document.createElement( 'script' );
$complete(); scr.type = 'text/javascript';
} scr.charset = 'utf-8';
} onload( scr, $complete );
document.getElementsByTagName( 'head' )[0]
var i, j, img, count, total; .appendChild( scr );
count = 0; scr.src = $url;
total = arguments.length - 1; }
for( i = 1, j = arguments.length ; i < j ; i++ ){
scriptLoader( arguments[i], loaded );
} bulkScriptLoader( oncomplete, '1.js', '2.js' );
} function oncomplete(){
alert( 'loaded' );
}

13. script
sequenceScriptLoader bulkScriptLoader
function sequenceScriptLoader( $complete ){ function buldScriptLoader( $complete ){
function loaded( $url ){ function loaded( $url ){
if( ++count == total ){ if( ++count == total ){
$complete(); $complete();
}else{ }
scriptLoader( arg[count], loaded ); }
}
} var i, j, img, count, total;
count = 0;
var i, j, img, count, arg; total = arguments.length - 1;
count = 0; for( i = 1, j = arguments.length ; i < j ; i++ ){
arg = Array.prototype.slice.call( arguments, 1 ); scriptLoader( arguments[i], loaded );
scriptLoader( arg[0], loaded ); }
} }
sequenceScriptLoader( oncomplete, '1.js', '2.js' );
function oncomplete(){
alert( 'loaded' );
}