pixelhandler · October 9, 2011 01:16
diff --git a/deferred-promise.html b/deferred-promise.html
 <!docType html>
 <html>
 <head>
  <title>Deferred / Promise</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-1.6.4-promises.js">// get script at https://gist.github.com/1273133</script>
 </head>
 <body>
 <h1>Deferred / Promise Example using jQuery 1.4.2 by adding implementation in newer version</h1>
 <script type="text/javascript" charset="utf-8">

 (function($){ // IIFE ...
  
 $(function(){ // doc ready ...
  
  var container, things, promises;
      
  // Code below borrowed from ...
  //    Deferreds post : http://quickleft.com/blog/jquery-15-hotness-part-2
  //    Code : https://gist.github.com/862567

  container = $( "<div/>" ).appendTo( document.body );
  $('div').html("<p>jQuery version:" + jQuery.fn.jquery + ". Hang on this should take about 5 seconds to complete.</p>");

  // List of resources we want to load files on http://pixelhandler.com/ domain
  things = [
    {
      url: "/downloads/code/deferred-promise/services/?type=XML",
      data_type: "xml",
      name: "Products XML"
    },
    {
      url: "/downloads/code/deferred-promise/services/?type=JSON",
      data_type: "json",
      name: "Products JSON"
    }
  ];

  // Container to hold our promises
  promises = [];

  function getSomething(thing){

    // Create our deferred
    var dfd = $.Deferred();

    // - Make a request and resolve our deferred onSuccess
    // - You can get super fancy here with $.ajax and explicitly
    //   set fail or rejected states
    $.get(
      thing.url,
      function() { dfd.resolve(); },
      thing.data_type
    );

    // We return a promise so we can watch it for a resolution
    return dfd.promise();

  }

  // Iterate through our requests
  $.each( things, function(_, thing){
    // - Each getSomething() call will return a promise, so let's
    //   push them into our promises array
    promises.push( getSomething(thing).done(function(){
      // - This is an inline done() handler which will fire when
      //   the individual promise is resolved
      container.append( '<p>Loaded ' + thing.name  + '. - Promise done.</p>' );
      // - You could string other handlers like fail() after this
      //   if you want to try a broken link or other situation
    }) );
  });

  setTimeout(function(){

    // Apply entire array of promises to a $.when listener
    $.when.apply( null,  promises ).then(function(){
      // All promises have been resolved :)
      container.append( '<p class="green">Finished loading All Files - All promises have been resolved. (We can even wait a bit before we handle our promises. If they have already been resolved, jQuery will remember!)</p>' );
    });

  }, 5000);

 }); // end ready

 }(jQuery)); // end IIFE

 </script>
 </body>
 </html>
	<!docType html>
	<html>
	<head>
	<title>Deferred / Promise</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-1.6.4-promises.js">// get script at https://gist.github.com/1273133</script>
	</head>
	<body>
	<h1>Deferred / Promise Example using jQuery 1.4.2 by adding implementation in newer version</h1>
	<script type="text/javascript" charset="utf-8">

	(function($){ // IIFE ...

	$(function(){ // doc ready ...

	var container, things, promises;

	// Code below borrowed from ...
	// Deferreds post : http://quickleft.com/blog/jquery-15-hotness-part-2
	// Code : https://gist.github.com/862567

	container = $( "<div/>" ).appendTo( document.body );
	$('div').html("<p>jQuery version:" + jQuery.fn.jquery + ". Hang on this should take about 5 seconds to complete.</p>");

	// List of resources we want to load files on http://pixelhandler.com/ domain
	things = [
	{
	url: "/downloads/code/deferred-promise/services/?type=XML",
	data_type: "xml",
	name: "Products XML"
	},
	{
	url: "/downloads/code/deferred-promise/services/?type=JSON",
	data_type: "json",
	name: "Products JSON"
	}
	];

	// Container to hold our promises
	promises = [];

	function getSomething(thing){

	// Create our deferred
	var dfd = $.Deferred();

	// - Make a request and resolve our deferred onSuccess
	// - You can get super fancy here with $.ajax and explicitly
	// set fail or rejected states
	$.get(
	thing.url,
	function() { dfd.resolve(); },
	thing.data_type
	);

	// We return a promise so we can watch it for a resolution
	return dfd.promise();

	}

	// Iterate through our requests
	$.each( things, function(_, thing){
	// - Each getSomething() call will return a promise, so let's
	// push them into our promises array
	promises.push( getSomething(thing).done(function(){
	// - This is an inline done() handler which will fire when
	// the individual promise is resolved
	container.append( '<p>Loaded ' + thing.name + '. - Promise done.</p>' );
	// - You could string other handlers like fail() after this
	// if you want to try a broken link or other situation
	}) );
	});

	setTimeout(function(){

	// Apply entire array of promises to a $.when listener
	$.when.apply( null, promises ).then(function(){
	// All promises have been resolved :)
	container.append( '<p class="green">Finished loading All Files - All promises have been resolved. (We can even wait a bit before we handle our promises. If they have already been resolved, jQuery will remember!)</p>' );
	});

	}, 5000);

	}); // end ready

	}(jQuery)); // end IIFE

	</script>
	</body>
	</html>