hiroaki/jquery-promise-problem.html

## jquery-promise-problem.html
<html><head><title>Promise - Error handling</title>
<script>
(function() {
  var timeout, prepare, jquery_src;

  prepare = function() {
    jquery_src = {
      '2': 'https://code.jquery.com/jquery-2.2.4.min.js',
      '3': 'https://code.jquery.com/jquery-3.1.1.min.js'
    }[location.search.substr(1, 1)];
    if ( jquery_src ) {
      timeout = function() {
        console.log('Algorhythm: $.Deferred - jQuery '+ $.fn.jquery);
        var d = $.Deferred();
        setTimeout(function() { d.resolve() }, 1000);
        return d.promise();
      };
      return new Promise(function(resolve, reject) {
        var $script = document.createElement('script');
        $script.onload = function() { resolve() };
        $script.src = jquery_src;
        document.head.appendChild($script);
      });
    }
    else {
      timeout = function() {
        console.log('Algorhythm: Promise');
        return new Promise(function(resolve, reject){
          setTimeout(function() { resolve() }, 1000);
        });
      };
      return Promise.resolve();
    }
  }

  window.onload = function() {
    prepare().then(function() {

      timeout()
      .then(function(){
         throw new Error('Boo');
      })
      .then(
        function(){
          console.log('Hello World');
        },
        function(){
          console.log('In Error Handler');
        }
      )
      .then(
        function(){
          console.log('This should have run');
        }
      )[jquery_src ? 'fail' : 'catch'] = function(){
         console.log('But this does instead');
      };

    });
  };
}());
</script>
</head>
<body>
<h1>Promise - Error handling</h1>
<p>
  <a href="http://stackoverflow.com/questions/23744612/problems-inherent-to-jquery-deferred-jquery-1-x-2-x">
  http://stackoverflow.com/questions/23744612/problems-inherent-to-jquery-deferred-jquery-1-x-2-x
  </a>
</p>
<hr>
<p>
Open the browser console, then choose algorithm:
</p>
<ul>
  <li><a href="?">Native</a></li>
  <li><a href="?3">jQuery 3</a></li>
  <li><a href="?2">jQuery 2</a></li>
</ul>
</body></html>
	<html><head><title>Promise - Error handling</title>
	<script>
	(function() {
	var timeout, prepare, jquery_src;

	prepare = function() {
	jquery_src = {
	'2': 'https://code.jquery.com/jquery-2.2.4.min.js',
	'3': 'https://code.jquery.com/jquery-3.1.1.min.js'
	}[location.search.substr(1, 1)];
	if ( jquery_src ) {
	timeout = function() {
	console.log('Algorhythm: $.Deferred - jQuery '+ $.fn.jquery);
	var d = $.Deferred();
	setTimeout(function() { d.resolve() }, 1000);
	return d.promise();
	};
	return new Promise(function(resolve, reject) {
	var $script = document.createElement('script');
	$script.onload = function() { resolve() };
	$script.src = jquery_src;
	document.head.appendChild($script);
	});
	}
	else {
	timeout = function() {
	console.log('Algorhythm: Promise');
	return new Promise(function(resolve, reject){
	setTimeout(function() { resolve() }, 1000);
	});
	};
	return Promise.resolve();
	}
	}

	window.onload = function() {
	prepare().then(function() {

	timeout()
	.then(function(){
	throw new Error('Boo');
	})
	.then(
	function(){
	console.log('Hello World');
	},
	function(){
	console.log('In Error Handler');
	}
	)
	.then(
	function(){
	console.log('This should have run');
	}
	)[jquery_src ? 'fail' : 'catch'] = function(){
	console.log('But this does instead');
	};

	});
	};
	}());
	</script>
	</head>
	<body>
	<h1>Promise - Error handling</h1>
	<p>
	<a href="http://stackoverflow.com/questions/23744612/problems-inherent-to-jquery-deferred-jquery-1-x-2-x">
	http://stackoverflow.com/questions/23744612/problems-inherent-to-jquery-deferred-jquery-1-x-2-x
	</a>
	</p>
	<hr>
	<p>
	Open the browser console, then choose algorithm:
	</p>
	<ul>
	<li><a href="?">Native</a></li>
	<li><a href="?3">jQuery 3</a></li>
	<li><a href="?2">jQuery 2</a></li>
	</ul>
	</body></html>