Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Call Function with Random Timer

function randRange(data) {
       var newTime = data[Math.floor(data.length * Math.random())];
       return newTime;
}

function toggleSomething() {
       var timeArray = new Array(200, 300, 150, 250, 2000, 3000, 1000, 1500);

       // do stuff, happens to use jQuery here (nothing else does)
       $("#box").toggleClass("visible");

       clearInterval(timer);
       timer = setInterval(toggleSomething, randRange(timeArray));
}

var timer = setInterval(toggleSomething, 1000);
// 1000 = Initial timer when the page is first loaded

View Demo

Comments

  1. Why do you use this array of times ?

    Here is a more randomly way :

    function toggleSomething() {
    // do stuff, happens to use jQuery here (nothing else does)
    $(“#box”).toggleClass(“visible”);

    clearInterval(timer);
    timer = setInterval(toggleSomething, parseInt(Math.random() * randomWidth));
    }

    var randomWidth = 3000;
    // The random range will be from 0 to 3000, or whatever you want !
    var timer = setInterval(toggleSomething, 1000);
    // 1000 = Initial timer when the page is first loaded

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```