javascript / jquery - finding the closest value in an array

Question

I'm modifying the jquery ui slider. I have certain "stops" I want the user to be able to slide to, expressed as a percentage of the slider's overall width. So, for example, if I have 3 stops, they will be distributed evenly at 0, 50, and 100 (%). I store these in an array [0,50,100].

When the user drags the slider and releases, I capture the slider's current value. So if he scrolled 56% of the way across the bar, his stopVal is 56.

How do I write a function that will then determine which number in the array this stopVal is closest to? Here's my code:

var optValArr = [0,50,100];

function slideStop( event, ui ) {
    var stopVal = ui.value;
    //NOW NEED TO FIND CLOSEST ARRAY VALUE TO stopVal   
}

Answer 1

This function will let you do that:

Array.prototype.closest = function(value) {
   var i;

   function diff(n) {
      var diff = n - value;

      return diff < 0 ? -diff : diff;
   }

   var found = this[0],
       mindiff = diff(found);

   for (i = 1 ; i < this.length ; i++) {
      var currentdiff = diff(this[i]);

      if (currentdiff < mindiff) {
          found = this[i];
          mindiff = diff(found);
      }
   }

  return found;
}

Now you can do this:

var optValArr = [0,50,100];

function slideStop( event, ui ) {
    var stopVal = ui.value;
    //NOW NEED TO FIND CLOSEST ARRAY VALUE TO stopVal 


   stopVal = optValArr.closest(stopVal);
}

NOTE: Some people consider defining prototypes for native types as dangerous as it can cause conflicts if two libraries do the same (just like global variable). If you are writing a public library you should therefore avoid adding to the prototypes of native types.

Answer 2

Try This:

var optValArr = [0,50,100];

function slideStop( event, ui ) {
    var stopVal = ui.value;
    var diff=101;
    var val =0;

    for(var i =0; i < optValArr.length; i++){
        var tmpDiff = Math.abs(stopVal - optValArr[i]);
        if(tmpDiff < diff){
           diff=tmpDiff;
           val = optValArr[i]
        }
    }             
}
slideStop("something", {"value":20});

Demo: http://jsfiddle.net/ggzZj/

Answer 3

var optValArr = [0,50,100];

function slideStop( event, ui ) {
    var stopVal = ui.value;
    var closestVal = optValArr.reduce(function (memo, curr) {
        var currDiff = Math.abs(curr - stopVal),
            memoDiff = Math.abs(memo - stopVal)

        return memoDiff < currDiff ? memoDiff : currDif
    }) 
}

Answer 4

Another common definition of "closer" is based on the square of the difference. But, you could do that by simply adding the number that you want in your original array like this:

[10,40,50, my_number]

Then, sort your array and then you choice if you want the closest position from the right or the left.

What do you think?