如何使用 javascript 在一段时间内从数组中获取随机结果？

Question

我希望下面的函数 tim 每 500 毫秒从 Array 获取一个不断变化的路由。相反，在我的 JS 控制台中，我收到以下重复错误：

VM5550:1 未捕获的语法错误：输入意外结束

这是怎么回事，我需要做什么才能得到我想要的结果？

我的代码：

var Array = ["http://files.parsetfss.com/9.png", 
"http://files.parsetfss.com/5.png",
"http://files.parsetfss.com/6.png",
"http://files.parsetfss.com/7.png",
"http://files.parsetfss.com/8.png"];

var sampl = _.first(_.sample(Array, 1));
var tim = setInterval(sampl, 500);

我也试过将 sample 包装在函数中，如下所示：

var sampl = function(){return _.first(_.sample(Array, 1))};

我仍然没有得到想要的结果，但现在我得到的结果一直是 7 或 11（刷新屏幕多次后。

Answer 1

您可以使用此函数从数组中获取随机元素，如下所示：

var url = getRandomeEle(array);

function getRandomEle(arr) {
   return arr[~~(Math.random()*arr.length)];
}

Answer 2

首先，您绝对应该将 var 的名称更改为其他名称，而不是覆盖 Array 对象。

接下来，_.first 似乎是不必要的。样本 1 正在返回一个字符串。

运行查看所需效果的代码段。

var arr = [
  "http://files.parsetfss.com/9.png", 
  "http://files.parsetfss.com/5.png",
  "http://files.parsetfss.com/6.png",
  "http://files.parsetfss.com/7.png",
  "http://files.parsetfss.com/8.png"
];

var tim = setInterval( function() {
  document.body.innerHTML = _.sample(arr);
}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>

Answer 3

您需要将函数传递给 setInterval，而您通过下划线的 first 和 sample 方法将运行数组的结果传递给它（其中在你的情况下是一个字符串）。正如@Tony 指出的那样，使用 first 是不必要的，因为 sample 方法的第二个参数指定了您期望的结果数（参见 documentation）。

以下是我认为您正在寻找的内容：

var array = ["http://files.parsetfss.com/9.png", 
"http://files.parsetfss.com/5.png",
"http://files.parsetfss.com/6.png",
"http://files.parsetfss.com/7.png",
"http://files.parsetfss.com/8.png"];

function getRandom() {
    return _.sample(array, 1)[0];
} 

function showRandom() {
    console.log(getRandom());
}

// setInterval returns a pointer to the interval ...
var interval = setInterval(showRandom, 500);

// ... which you can use to stop it
//clearInterval(interval);

Answer 4

答案已经很好了，我同意 Tony 的观点，你真的应该更改变量名称 Array。

我想你会想在某个时候停止这个间隔，在这种情况下你需要调用 clearInterval.

这是一个快速 DEMO。

script.js

var intervalId,

    startButton = document.getElementById('start'),
    stopButton  = document.getElementById('stop'),

    urls = [
      "http://files.parsetfss.com/9.png", 
      "http://files.parsetfss.com/5.png",
      "http://files.parsetfss.com/6.png",
      "http://files.parsetfss.com/7.png",
      "http://files.parsetfss.com/8.png"
    ];

startButton.addEventListener('click', tim, false);
stopButton.addEventListener('click', stopTim, false);


function tim() {
  intervalId = setInterval(printRandomUrl, 500);
}

function stopTim(){
  clearInterval(intervalId)
}

function printRandomUrl(){
  console.log(_.sample(urls));
}

index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="lodash.js@3.8.0" data-semver="3.8.0" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.js"></script>

  </head>

  <body>
    <h1>Basic plunk!</h1>
     <button id="start">Start</button>
     <button id="stop">Stop</button>

     <script src="script.js"></script>
  </body>

</html>

如何使用 javascript 在一段时间内从数组中获取随机结果？

How do you use javascript to get a random result from an array over a time interval?

javascript

underscore.js

lodash