Skip to content

Instantly share code, notes, and snippets.

@bharathmuppa
Created March 29, 2015 15:02
Show Gist options
  • Save bharathmuppa/9815d9c2023741b469c0 to your computer and use it in GitHub Desktop.
Save bharathmuppa/9815d9c2023741b469c0 to your computer and use it in GitHub Desktop.
JS Bin closure and self invoking example // source http://jsbin.com/pakiqi
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="closure and self invoking example">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="button">button</button>
<script id="jsbin-javascript">
// self-invoking a function literal and assigning the value of the invocation to the variable myQuery.
var myQuery = (function() {
return "Hello";
})();
// self-invoking a function literal and assigning the value of the invocation to the variable myQuery.
var myQuery1 = (function() {
return "Hello";
});
var value = myQuery1();
// on button third click alert should be displayed
var element = document.getElementById("button");
element.onclick = (function() {
// init the count to 0
var count = 0;
return function(e) {
//count
count++;
if (count === 3) {
// do something every third time
alert("Third time's the charm!");
//reset counter
count = 0;
}
};
})();
//withot closure
/*var counter = 0;
var element = document.getElementById("button");
element.onclick = function() {
// increment outside counter
counter++;
if (counter === 3) {
// do something every third time
alert("Third time's the charm!");
// reset counter
counter = 0;
}
};*/
//sample closure
function add(value1) {
return function doAdd(value2) {
return value1 + value2;
};
}
var increment = add(1);
var foo = increment(2);
</script>
<script id="jsbin-source-javascript" type="text/javascript">// self-invoking a function literal and assigning the value of the invocation to the variable myQuery.
var myQuery = (function() {
return "Hello";
})();
// self-invoking a function literal and assigning the value of the invocation to the variable myQuery.
var myQuery1 = (function() {
return "Hello";
});
var value = myQuery1();
// on button third click alert should be displayed
var element = document.getElementById("button");
element.onclick = (function() {
// init the count to 0
var count = 0;
return function(e) {
//count
count++;
if (count === 3) {
// do something every third time
alert("Third time's the charm!");
//reset counter
count = 0;
}
};
})();
//withot closure
/*var counter = 0;
var element = document.getElementById("button");
element.onclick = function() {
// increment outside counter
counter++;
if (counter === 3) {
// do something every third time
alert("Third time's the charm!");
// reset counter
counter = 0;
}
};*/
//sample closure
function add(value1) {
return function doAdd(value2) {
return value1 + value2;
};
}
var increment = add(1);
var foo = increment(2);
</script></body>
</html>
// self-invoking a function literal and assigning the value of the invocation to the variable myQuery.
var myQuery = (function() {
return "Hello";
})();
// self-invoking a function literal and assigning the value of the invocation to the variable myQuery.
var myQuery1 = (function() {
return "Hello";
});
var value = myQuery1();
// on button third click alert should be displayed
var element = document.getElementById("button");
element.onclick = (function() {
// init the count to 0
var count = 0;
return function(e) {
//count
count++;
if (count === 3) {
// do something every third time
alert("Third time's the charm!");
//reset counter
count = 0;
}
};
})();
//withot closure
/*var counter = 0;
var element = document.getElementById("button");
element.onclick = function() {
// increment outside counter
counter++;
if (counter === 3) {
// do something every third time
alert("Third time's the charm!");
// reset counter
counter = 0;
}
};*/
//sample closure
function add(value1) {
return function doAdd(value2) {
return value1 + value2;
};
}
var increment = add(1);
var foo = increment(2);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment