DannyJoris/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.box {
  display: none;
  width: 100px;
  height: 100px;
  border: 1px solid hotpink;
  background: white;
  margin: 10px;
}
</style>
</head>
<body>

  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>

<script id="jsbin-javascript">
function callbackFn1() {
  $('.box1').css('background-color', 'pink');
}

function callbackFn2() {
  $('.box2').css('background-color', 'pink');
}

function callbackFn3() {
  return function() {
    $('.box3').css('background-color', 'pink');
  };
}

// callback called on done
$('.box1').slideDown(2000)
.promise()
.done(callbackFn1);

// callback called immediately because of (), which excecutes the function immediately
$('.box2').slideDown(2000)
.promise()
.done(callbackFn2());

// this one excecutes immediately, but returns a new function, which will then be called after the slideDown promise is resolved.
$('.box3').slideDown(2000)
.promise()
.done(callbackFn3());
</script>


</body>
</html>

## jsbin.yepude.css
.box {
  display: none;
  width: 100px;
  height: 100px;
  border: 1px solid hotpink;
  background: white;
  margin: 10px;
}

## jsbin.yepude.js
function callbackFn1() {
  $('.box1').css('background-color', 'pink');
}

function callbackFn2() {
  $('.box2').css('background-color', 'pink');
}

function callbackFn3() {
  return function() {
    $('.box3').css('background-color', 'pink');
  };
}

// callback called on done
$('.box1').slideDown(2000)
.promise()
.done(callbackFn1);

// callback called immediately because of (), which excecutes the function immediately
$('.box2').slideDown(2000)
.promise()
.done(callbackFn2());

// this one excecutes immediately, but returns a new function, which will then be called after the slideDown promise is resolved.
$('.box3').slideDown(2000)
.promise()
.done(callbackFn3());
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.box {
	display: none;
	width: 100px;
	height: 100px;
	border: 1px solid hotpink;
	background: white;
	margin: 10px;
	}
	</style>
	</head>
	<body>

	<div class="box box1"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>

	<script id="jsbin-javascript">
	function callbackFn1() {
	$('.box1').css('background-color', 'pink');
	}

	function callbackFn2() {
	$('.box2').css('background-color', 'pink');
	}

	function callbackFn3() {
	return function() {
	$('.box3').css('background-color', 'pink');
	};
	}

	// callback called on done
	$('.box1').slideDown(2000)
	.promise()
	.done(callbackFn1);

	// callback called immediately because of (), which excecutes the function immediately
	$('.box2').slideDown(2000)
	.promise()
	.done(callbackFn2());

	// this one excecutes immediately, but returns a new function, which will then be called after the slideDown promise is resolved.
	$('.box3').slideDown(2000)
	.promise()
	.done(callbackFn3());
	</script>


	</body>
	</html>