Question

我设法为随机图像和js代码提供js脚本以随机化setinterval函数。我设法让它们协同工作，但图像变化非常快。我需要在1分10分钟之间的随机时间内改变1次图像。

function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

}

function doSomething() {}

(function loop() {
    var rand = Math.round(Math.random() * 9999999999 );
    setTimeout(function() {
            doSomething();
            loop();  
    }, rand);
}());

randomImage();
setInterval(randomImage, doSomething());

癫痫警告jsfiddle中的图像快速闪烁和旋转！ 这是一个jsfiddle demo jsfiddle example

Answer 1

这是因为您在没有第二个参数值的情况下调用setInterval。第二个值是第一个参数中的函数应该触发的时间（以毫秒为单位）。由于它未定义，这与说0相同。

我认为你想要的是一个递归的setTimeout。

我分叉你的jsfiddle：https://jsfiddle.net/7g3rwhnw/

注意我注释掉了随机内容的行，我只是每秒更新一次，而不是随机获得毫秒数。

Answer 2

你的代码似乎有些混乱。在loop函数中，您调用的是doSomething，它不执行任何操作，而不是调用randomImage。你有两种循环机制（一种在setTimeout内使用loop，另一种使用setInterval，只有第一种就足够了。

function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

}

(function loop() {
  randomImage();                                        // change to a random image
  var rand = Math.floor(Math.random() * 5000) + 2000;   // get a number between 2 and 7 (5 + 2) seconds (you can change to whatever meets your need)
  setTimeout(loop, rand);                               // call loop after that amount of time is passed
}());                                                   // call loop at startup to get a random image on start

#background {
  width: 500px;
  height: 300px;
  background-color: red;
}

<div id="background"></div>

Answer 3

检查以下代码。在1到10秒之间更改图像。

＆＃13;

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">

            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            function setNewInterval() {
                var randomInterval = getRandomInt(1000, 10 * 1000);
                console.log(randomInterval / 1000 + ' seconds');
                setTimeout(function () {
                    randomImage();
                }, randomInterval);
            }

            function randomImage() {
                var fileNames = [
                  "http://i.imgur.com/YibF8aO.jpg",
                  "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
                  "http://i.imgur.com/JMgKg9O.jpg"
                ];
                var randomIndex = getRandomInt(0, 2);
                document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';
                setNewInterval();
            }
            setNewInterval();
        </script>
    </head>
    <body>
        <div id="background" style="width: 700px; height: 500px;"></div>
    </body>
    </html>

＆＃13;

Answer 4

那是因为您doSOmething()作为setInterval()的第二个参数。 setInterval()的第二个参数是您希望它运行的时间间隔（与setTimeout()相同，但会一直运行，直到您使用clearInterval()停止它。）

如果你这样做：

setInterval(randomImage, (60*1000) + Math.floor(Math.random()*9*60*1000));

您正在创建一个在1分钟到10分钟之间随机的间隔。但是，它将始终以该随机间隔运行。我的意思是，如果随机返回是2分钟，randomImage函数将每2分钟调用一次，所以，如果你想每次都有一个随机间隔，那么每次都应该setTimeout，因此，您可以更新下一次randomImage来电的时间。

此外，我注意到您在setTimeout函数中运行了randomImage，这意味着您正在尝试正确的方式，只是您在setInterval内失败了。

只需移除setInterval功能并相应地更新setTimeout，如下所示：

function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

}

(function loop() {
    var between1and10min =  (60*1000) + Math.floor(Math.random()*9*60*1000);
    setTimeout(function() {
            randomImage();
            loop();  
    }, between1and10min);
}());

randomImage();

小提琴：https://jsfiddle.net/2w45Lmro/3/

实际上，您可以在randomImage函数中使用一行来匹配循环：

(function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

  setTimeout(randomImage, (60*1000) + Math.floor(Math.random()*9*60*1000));
})();

小提琴：https://jsfiddle.net/2w45Lmro/4/

随机化setInterval以随机显示随机图像

4 个答案: