Debounce/throttle demo

by Vladimir

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<div class="always">
Always: <span></span>
</div>
<div class="throttle">
Throttle: <span></span>
</div>

<div class="debounce">
Debounce: <span></span>
</div>
<p>
test
</p>

CSS

div {
  position: fixed;
  top: 0;
}
.throttle {
  top: 14px;
}
.debounce {
  top: 28px;
}
p {
  min-height: 3000px;
}

JavaScript

$(document).ready(function() {
	$(window).on('scroll', function() {
  	$('.always span').text($(window).scrollTop());
  });
	// throttle
  $(window).on('scroll', $.throttle(500, true, function() {
  	$('.throttle span').text($(window).scrollTop());
  }));
  // debounce
  $(window).on('scroll', $.debounce(500, true, function() {
  	$('.debounce span').text($(window).scrollTop());
  }));
});