IndexOf vs _.indexOf(Underscore.js) vs $.inArray ,which has better perfromance while working with array?

Question

NOTE:A event gets triggered based on check box selection and there are multiple checkboxes,i need to finish execution before another checkBox is checked,hence speed is of importance.Please help and thanks in advance

Answer 1

jQuery's $.inArray is effectively just a wrapper for vanilla Array.indexOf, when it exists (which it does in all modern browsers.)

Underscore's _.indexOf is more complicated, and includes some special handling for certain cases -- it will use binary search if the array is already sorted, for example -- so may be faster in some circumstances.

The best way to find out which is fastest will be to run a performance test against your real-world data; different algorithms may be faster or slower depending on the type of data they're working with.

(It's also worth considering whether it's reasonable to include an entire external library just for one potentially-faster function it contains; unless you're already depending on that library for other functions it may be better to look at what that library code is actually doing and take in only the portions of it you need.)

All that said, though, I'm pretty sure you're barking up the wrong tree here:

i need to finish execution before another checkBox is checked

Here's a quick test case of .indexOf on a million-item array; try to get the second checkbox's click event to fire while the first one is still going:

let firstIsRunning = false;

// make a big random array to search through:
let bigArray = [];
for (var i = 0; i < 1000000; i++) {
  bigArray.push(Math.random())
  if (i === 500000) {
    bigArray.push("TEST") // just so we have something to match
  }
}

// run indexOf on that array:
$('#one').on('click', function() {
  firstIsRunning = true;
  console.log(bigArray.indexOf("TEST"))
  firstIsRunning = false;
})

// will log "true" if the first function is still running. (This will never happen.)
$('#two').on('click', function() {
  console.log(firstIsRunning)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="one"> Check me first</label><br>
<label><input type="checkbox" id="two"> then me</label>

Even if .indexOf weren't virtually instantaneous, so long as there's no asynchronous code involved, javascript's single-threaded nature means that (with few exceptions) the first event handler would complete before the second one was taken up.

If asynchronous code is involved, and you need to ensure that one operation completes before another begins, then you'll want to explicitly code that in (by making the second operation wait for the first one's Promise to resolve) rather than depending on the fastest algorithm you can find and hoping that it's fast enough.