Process large data

by ostapische

HTML

<table><tbody>
			<tr>
				<td>Time:</td>
				<td><input type="text" id="time" value="" /></td>
				<td><button id="set_time">Set time</button></td>
			</tr>
			<tr>
				<td>Number of elements in array:</td>
				<td><input type="text" id="elements_number" value="1000" /></td>
			</tr>
			<tr>
				<td>Use timeout?:</td>
				<td><input type="checkbox" id="use_timeout" value="1" checked="checked" /></td>
			</tr>
			<tr>
				<td>Show output?:</td>
				<td><input type="checkbox" id="show_output" value="1" checked="checked" /></td>
			</tr>
			<tr><td><button id="start_processing">Start processing</button></td></tr>
			<tr>
				<td>Processing time:</td>
				<td><input type="text" id="processing_time" value=" " /></td>
			</tr>
			<tr>
				<td>Processing element:</td>
				<td><input type="text" id="processing_element" value=" " /></td>
				<td></td>
			</tr>
			<tr>
				<td>Array:</td>
				<td colspan="2"><textarea id="array" cols="30" rows="20"></textarea></td>
			</tr>
		</tbody></table>
		<table>
			<thead>
				<tr><td colspan="2">My results for 1000 elements ( seconds ):</td></tr>
			</thead>
			<tbody>
				<tr>
					<td>Use timeout, show output</td>
					<td>17.505</td>
				</tr>
				<tr>
					<td>Use timeout, don't show output</td>
					<td>4.504</td>
				</tr>
				<tr>
					<td>Don't use timeout, show output</td>
					<td>34.107</td>
				</tr>
				<tr>
					<td>Don't use timeout, don't show output</td>
					<td>0.023</td>
				</tr>
			</tbody>
		</table>

JavaScript

var array = new Array();
			var elementsNumber = 0;
			var useTimeout = true;
			var showOutput = true;
			var startTime = 0;
			var endTime = 0;
			function setTime() {
				document.getElementById( 'time' ).value = ( new Date() ).getTime();
			}
			function startProcessing() {
				elementsNumber = parseInt( document.getElementById( "elements_number" ).value );
				useTimeout = document.getElementById( "use_timeout" ).checked;
				showOutput = document.getElementById( "show_output" ).checked;
				startTime = new Date();
				array = new Array();
				if ( useTimeout ) {
					setTimeout( fillArrayWithTimeout( 0 ), 0 );
				} else {
					fillArrayWithoutTimeout();
				}
			}
			function fillArrayWithTimeout( position ) {
				return function() {
					if ( position < elementsNumber ) {
						array[ position ] = ( new Date() ).getTime();
						if ( showOutput ) {
							setInWork( position );
						}
						setTimeout( fillArrayWithTimeout( position + 1 ), 0 );
					} else {
						setInEnd();
						setProcessingTime();
					}
				}
			}
			function fillArrayWithoutTimeout() {
				for( var i = 0; i < elementsNumber; i++ ) {
					array[ i ] = ( new Date() ).getTime();
					if ( showOutput ) {
						setInWork( i );
					}
				}
				setInEnd();
				setProcessingTime();
			}
			function setInWork( position ) {
				document.getElementById( "processing_element" ).value = position;
				document.getElementById( "array" ).innerText = JSON.stringify( array );
			}
			function setInEnd() {
				document.getElementById( "processing_element" ).value = "Done";
				document.getElementById( "array" ).innerText = JSON.stringify( array );
			}
			function setProcessingTime() {
				endTime = new Date();
				document.getElementById( "processing_time" ).value = ( ( endTime.getTime() - startTime.getTime() ) / 1000 );
			}
			window.addEventListener( "load", function( windowLoadE ) {
				setTime();
				document.getElementById( "set_time" ).addEventListener( "click", setTime...