根据时间从JavaScript中的数组更改图像

Question

I have an array with values var arr = [["imagelink1","0","20"],["imagelink2","21","50"],["imagelink3","51","100"],["imagelink4","101","200"],[null]];

I get this array from a csv which i can't modify.
First one is an image link 2nd element is start time and 3rd element is end time. I need to call a function with a time value say display that will check which time range it falls in and return the image link.

function displayimage(timval){  Code here }

Calling the function displayimage(22); should check the array and return imagelink2. what might be the most optimized solution to this?

Answer 1

You can use find() to find sub array where timval is between first and second element.

 var arr = [["imagelink1","0","20"],["imagelink2","21","50"],["imagelink3","51","100"],["imagelink4","101","200"],[null]]; function displayimage(timval){ var image = arr.find(e => timval >= e[1] && timval <= e[2]) return image ? image[0] : 'There is no image'; } console.log(displayimage(22)) console.log(displayimage(1000)) 

Answer 2

A simple loop should be efficient:

 var arr = [["imagelink1","0","20"],["imagelink2","21","50"],["imagelink3","51","100"],["imagelink4","101","200"],[null]]; function displayimage(timval){ for (var i = 0; i < arr.length; i++) if (timval >= arr[i][1] && timval <= arr[i][2]) return arr[i][0]; return null; // return whatever default value applies for no match } console.log(displayimage(22)); // imagelink2 console.log(displayimage(222)); // null 

Answer 3

The solution using regular and fast for loop:

 /** * Gets an image link if the time value is within a limits * * @param timeValue * @param arr input array * @returns {string} */ function displayImage(timeValue, arr) { timeValue = Number(timeValue); // casting to number var imgLink = ""; for (var i = 0, len = arr.length; i < len; i++) { if (arr[i].length === 3 // if it's a valid nested array(of needed length) && (Number(arr[i][1]) <= timeValue && timeValue <= Number(arr[i][2]))) { imgLink = arr[i][0]; break; // avoiding redundant iterations } } return imgLink; } var arr = [["imagelink1","0","20"],["imagelink2","21","50"],["imagelink3","51","100"],["imagelink4","101","200"],[null]]; console.log(displayImage("22", arr)); 

Answer 4

Hope this will work for you

 var arr = [["imagelink1","0","2000"],["imagelink2","21","5000"],["imagelink3","51","10000"],["imagelink4","101","20000"],[null]]; displayimage(); function displayimage(){ for (var i = 0; i < arr.length; i++){ if(arr[i].length > 0){ var image = arr[i][0]; setTimeout(function(image){ $(".img").html(image); },arr[i][2],image); } } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="img"> </div>