JSFiddle - React, Tailwind, and code Playground

by Vivek Athalye

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<button id="your">Your approach</button>
<button id="new">New approach</button>
<div id="output">
  
</div>

JavaScript

var i, arr=[], start=0;
for(i=0; i<10000; i++) {
	arr.push({ ticker:"sometext_"+i });
}

$(function(){
	$("#your").click(function(e){
  	e.preventDefault();
    firstApproach();
  });
	$("#new").click(function(e){
  	e.preventDefault();
    secondApproach();
  });
})

function firstApproach() {
  for(i=0; i<arr.length; i++) {
    $("<div>").text("processing" + i).appendTo($("#output"));
    if("sometext_9999" === arr[i].ticker) {
      alert("found element 9999");
      return;
    }
  }
  $("<div>").text("not found").appendTo($("#output"));
}


function secondApproach() {
  for(i=start; i<start+100 && i<arr.length; i++) {
    $("<div>").text("processing" + i).appendTo($("#output"));
    if("sometext_9999" === arr[i].ticker) {
      alert("found element 9999");
      return;
    }
  }
  if(i==arr.length){
	  $("<div>").text("not found").appendTo($("#output"));
  } else {
  	start = i;
  	setTimeout(secondApproach,0);
  }
}