Shuffle the setInterval function to display unpredictable images at varying intervals

Question

Shuffle the setInterval function to display unpredictable images at varying intervals

I found JavaScript scripts for displaying random images and randomizing the setInterval function. I was able to get them to work together, but the images are changing too quickly. I want the images to change randomly between 1 minute and 10 minutes.

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

WARNING: The images in the jsfiddle demo are flashing and rotating very quickly! Check out the jsfiddle example here

javascript

Answer 1

Answer №1

The reason for this issue is that the setInterval function is being called without specifying the 2nd parameter, which represents the time in milliseconds for the function in the 1st parameter to run. By leaving it undefined, it defaults to 0 milliseconds.

A better approach would be to use a recursive setTimeout instead.

Take a look at the modified version of your jsfiddle: https://jsfiddle.net/1a2b3c4d/

I have commented out the line that generates random output and instead, the content is updated every second without random time intervals.

Answer 2

The reason for this issue is that the setInterval function is being called without specifying the 2nd parameter, which represents the time in milliseconds for the function in the 1st parameter to run. By leaving it undefined, it defaults to 0 milliseconds.

A better approach would be to use a recursive setTimeout instead.

Take a look at the modified version of your jsfiddle: https://jsfiddle.net/1a2b3c4d/

I have commented out the line that generates random output and instead, the content is updated every second without random time intervals.

Answer 3

Answer №2

Take a look at the following code snippet. Modify the image every 1 to 10 seconds.

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

Answer 4

Take a look at the following code snippet. Modify the image every 1 to 10 seconds.

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

Answer 5

Answer №3

It appears that your code may be a bit confusing. Within the loop function, you are currently calling doSomething which serves no purpose instead of calling randomImage. Additionally, you have two mechanisms for looping (one using setTimeout inside loop and another using setInterval where only the former is necessary).

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 6

It appears that your code may be a bit confusing. Within the loop function, you are currently calling doSomething which serves no purpose instead of calling randomImage. Additionally, you have two mechanisms for looping (one using setTimeout inside loop and another using setInterval where only the former is necessary).

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 7

Answer №4

The reason for the issue is that doSOmething() is mistakenly placed as the second parameter of setInterval(). The second parameter of setInterval() should actually specify the interval at which the function should run indefinitely until stopped with clearInterval().

To address this, you can set a random interval between 1 minute and 10 minutes using the following code:

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

If you want the function to run at a random interval each time, you should use a setTimeout instead of setInterval like so:

function randomImage() {
  // Image URL array
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  // Get a random index
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  // Set background image
  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();

You can also combine the looping mechanism inside the randomImage function with a single line like so:

(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));
})();

You can view the working examples in the provided Fiddles: Fiddle 1 and Fiddle 2

Answer 8

The reason for the issue is that doSOmething() is mistakenly placed as the second parameter of setInterval(). The second parameter of setInterval() should actually specify the interval at which the function should run indefinitely until stopped with clearInterval().

To address this, you can set a random interval between 1 minute and 10 minutes using the following code:

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

If you want the function to run at a random interval each time, you should use a setTimeout instead of setInterval like so:

function randomImage() {
  // Image URL array
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  // Get a random index
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  // Set background image
  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();

You can also combine the looping mechanism inside the randomImage function with a single line like so:

(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));
})();

You can view the working examples in the provided Fiddles: Fiddle 1 and Fiddle 2

Shuffle the setInterval function to display unpredictable images at varying intervals

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The debounced function in a React component not triggering as expected

Using Google-Prettify with AngularJS

Verify using JavaScript whether the call is originating from a specific JSP

Different methods of transferring PHP post information to JavaScript

An unforeseen repetition of jQuery Ajax calls

Converting milliseconds into days, hours, minutes, and seconds using Angular

Is using $window.location.reload(true) the same as manually pressing CTRL+F5?

Create an image on a node's backdrop using a library of graph theory/networking techniques

Converting dates in JavaScript to the format (d MMMMM yyyy HH:mm am) without using moment.js

Refine JSON data by selecting only distinct key/value pairs

Guide to fetching external data with Next.js and importing the component into a different file

A guide on effectively utilizing BehaviorSubject for removing items from an array

Switch between showing or hiding at least three divs

AngularJS UI router regular expressions allows for dynamic and flexible routing

PHP MySQL table submission button

Troubleshooting Cloud Functions: Fixing functions.logger.log not Functioning

Capturing user inputs in PHP or AJAX

Access the CSV file using Office365 Excel via a scripting tool

How can I display the Bootstrap 5.3.0 Collapsible button on this basic website?

How can I use the select2 jQuery plugin with the tags:true option to ensure that selected choices do not appear again in the dropdown menu?