JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="move">drag me</div>
<button id="start">start processing</button>
CSS
#move {
width: 100px;
height: 100px;
background-color: red;
}
JavaScript
$('#move').draggable();
var data = new Array( 81500 ).join( 'data-' ).split('-'); // create 10.000 entries
function process( elem ) {
// heavy operations
var delay = 24110;
while(delay--) {
elem.charAt(1) + elem.charAt(2);
}
}
function runAsync( data ) {
var start = Date.now();
do {
process( data.shift() );
} while( data.length && Date.now() - start < 50 );
if( data.length ) {
setTimeout(function() {
runAsync(data );
}, 100 );
} else {
alert('processing done!');
}
}
$('#start').on('click', function() {
runAsync( data.concat() );
});