doganoo/throttling.html

## throttling.html
<html>
<head>
<style>
body{
display: flex;
flex-direction: column;
justify-content: center;
}

.container{
 padding: 0;
  margin: 0;
  display: flex;
justify-content: center;
align-items: flex-end;
align-content: center;
background: green;
min-height: 700px;
}

.bar{
background: tomato;
margin-left: 50px;
  width: 200px;
  height: 600px;
  margin-top: 10px;
     transition:width 900ms ease-in-out, height 900ms ease-in-out;
	 display: flex;
	 flex-direction: column;
}

.text{
color: white
}

.bar-transisted{
background: tomato;
margin-left: 50px;
  width: 200px;
  height: 300px;
  margin-top: 10px;
     transition:width 900ms ease-in-out, height 900ms ease-in-out;
	 	 display: flex;
	 flex-direction: column;
}

</style>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
  $( document ).ready(function() {
  var normal =true;
  var x = function(){
			if(normal){
				$(".bar").removeClass('bar').addClass('bar-transisted');
				normal = false;
			}else{
			$(".bar-transisted").removeClass('bar-transisted').addClass('bar');
				normal = true;
			}
		};
		$("#transist").on("click",_throttle(x,3000));

	function _throttle(func, delay){
		console.log("throttling");
		var timer = null;
		return function(){
			if(!timer){
				timer = setTimeout(function(){
					timer = null;
					console.log("executing throttle fnction!");
					func();
				}, delay);
			}else{
				console.log("can not execute since throttle timeout has to be exceed");
			}
		}
	}
});

  </script>
</head>
<body>
<button id='transist'>Click me!</button>
<div class='container'>
<div class='bar'><div class='text'>BAR 1</div></div>
<div class='bar'><div class='text'>BAR 2</div></div>
<div class='bar'><div class='text'>BAR 3</div></div>
<div class='bar'><div class='text'>BAR 4</div></div>
</div>

</body>
</html>
	<html>
	<head>
	<style>
	body{
	display: flex;
	flex-direction: column;
	justify-content: center;
	}

	.container{
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	align-content: center;
	background: green;
	min-height: 700px;
	}

	.bar{
	background: tomato;
	margin-left: 50px;
	width: 200px;
	height: 600px;
	margin-top: 10px;
	transition:width 900ms ease-in-out, height 900ms ease-in-out;
	display: flex;
	flex-direction: column;
	}

	.text{
	color: white
	}

	.bar-transisted{
	background: tomato;
	margin-left: 50px;
	width: 200px;
	height: 300px;
	margin-top: 10px;
	transition:width 900ms ease-in-out, height 900ms ease-in-out;
	display: flex;
	flex-direction: column;
	}

	</style>
	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script>
	$( document ).ready(function() {
	var normal =true;
	var x = function(){
	if(normal){
	$(".bar").removeClass('bar').addClass('bar-transisted');
	normal = false;
	}else{
	$(".bar-transisted").removeClass('bar-transisted').addClass('bar');
	normal = true;
	}
	};
	$("#transist").on("click",_throttle(x,3000));

	function _throttle(func, delay){
	console.log("throttling");
	var timer = null;
	return function(){
	if(!timer){
	timer = setTimeout(function(){
	timer = null;
	console.log("executing throttle fnction!");
	func();
	}, delay);
	}else{
	console.log("can not execute since throttle timeout has to be exceed");
	}
	}
	}
	});

	</script>
	</head>
	<body>
	<button id='transist'>Click me!</button>
	<div class='container'>
	<div class='bar'><div class='text'>BAR 1</div></div>
	<div class='bar'><div class='text'>BAR 2</div></div>
	<div class='bar'><div class='text'>BAR 3</div></div>
	<div class='bar'><div class='text'>BAR 4</div></div>
	</div>

	</body>
	</html>