JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<script src="http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js"></script>
<!-- throttle / debounce -->
<textarea id="logger" rows="30" cols="30"></textarea>
<button id="clear">Clear</button>
<ul>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
      <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
</ul>

CSS

*{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#logger, #clear {
		position: fixed;
		top: 10px;
	}
	#logger {
		left: 60px;
	}
	ul {
		float: right;
	}
	li {
		padding: 50px 25px;
	}

JavaScript

$.throttle = function(method, context) {  
    
    return function() {
        clearTimeout(method.timerId); 
        method.timerId= setTimeout(function(){ 
            method.apply(context);
        }, 100);
    }

}




$(window).on("scroll",$.throttle(function(){ 
   process();
}));

$(window).on("scroll", $.debounce(100,false,function(){
   process2();
}));

function process() {
 $("#logger").val($("#logger").val() + "\n"+">>throttle log>>", new Date());   
}

function process2() {
$("#logger").val($("#logger").val() + "\n"+"debounce log>>", new Date()); 
}

$('#clear').on("click", function(){
			$("#logger").val('');
});