基于时间从javascript中的数组更改图像答案

【问题标题】：Change image based on time from array in javascript基于时间从javascript中的数组更改图像
【发布时间】：2017-03-24 13:57:32
【问题描述】：

我有一个数组，其值为var arr = [["imagelink1","0","20"],["imagelink2","21","50"],["imagelink3","51","100"],["imagelink4","101","200"],[null]];

我从无法修改的 csv 中获取此数组。
第一个是图像链接，第二个元素是开始时间，第三个元素是结束时间。我需要调用一个具有时间值的函数，例如 display，它将检查它属于哪个时间范围并返回图像链接。

function displayimage(timval){  Code here }

调用函数displayimage(22);应该检查数组并返回 imagelink2。什么可能是最优化的解决方案？

【问题讨论】：

不应该返回imagelink2吗？
是的。 imagelink2.
“我从无法修改的 csv 中获取此数组。” - 您可能无法修改源 CSV，但这并不意味着您不能（重新）构造您的数组，但是您喜欢以便于处理。无论如何，为什么一个简单的循环不是一个有效的解决方案？元素的时间似乎是按升序排列的，所以......只要找到合适的时间就循环并突破。
JS 是一种异步语言。如果您事先获得了每个要显示的项目的时间表，那么您可能很容易触发 arr.length 很多 setTimeout 事件，以便在适当的时间调用您的显示功能并忘记它们。

标签： javascript arrays time

【解决方案1】：

您可以使用find() 查找timval 位于第一个元素和第二个元素之间的子数组。

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))

【讨论】：

【解决方案2】：

一个简单的循环应该是有效的：

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

【讨论】：

【解决方案3】：

使用常规和快速的解决方案for循环：

/**
 * 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));

【讨论】：

【解决方案4】：

希望这对你有用

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>

【讨论】：