Javascript setInterval every 5 seconds

Question

I would like to set an interval of 5 seconds between each alert. Found this thread:

setInterval(function() {
    alert("Message to alert every 5 seconds");
}, 5000);

But where do I put the setInterval() in order to alert every 5 seconds?

$(window).scroll(function() {
    if (checkVisible($('#footer'))) {
        alert("I DONT SEE A FOOTER");
    } else {
        alert("EUREKA - I SEE A FOOTER");
    }
});

function checkVisible(elm, eval) {
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (eval == "visible") 
        return ((y < (vpH + st)) && (y > (st - elementHeight)));

    if (eval == "above") 
        return ((y < (vpH + st)));
}

Many thanks in advance.

depends on at which point in your code do you want the timer to start — Ramanlfc, Feb 29 '16 at 13:24
So do you want this alert to pop up over and over every 5 seconds, or 5 seconds after the scroll event has occurred? — millerbr, Feb 29 '16 at 13:25
Please be more specific. Do you just want something to pop up every 5 seconds from the moment the page is loaded to the end of time? — apokryfos, Feb 29 '16 at 13:29
@apokryfos yes every 5 seconds from the moment the page is loaded to the end of time. — Hbaecklund, Feb 29 '16 at 13:36

score 12 · Accepted Answer · answered Feb 29 '16 at 13:33

12

You can put in load function

$(document).ready(function()
{
     setInterval(function() {
        alert("Message to alert every 5 seconds");
     }, 5000);
});

answered Feb 29 '16 at 13:33

praveen

1,355
1
9
10

thatOneGuy · Answer 2 · 2016-02-29T14:25:41.427

Basically you want to alert every 5 seconds but also check every 5 seconds if you have a footer or not ?

Then you add this :

setInterval(function() {
             if (checkVisible($('#footer'))) { //check footer
                    alert("I DONT SEE A FOOTER");
                } else {
                    alert("EUREKA - I SEE A FOOTER");
                }
        }, 5000);

This will show an alert every 5 seconds, the text on that alert will depend if you have a footer or not :)

But you don't want to call this every time you scroll (it will run around 12 time per scroll, which is not what you want). So you can either start it on load, or you can do as I've done and run the timer once when you start scrolling.

So ive created a function that sets up an interval :

 function showAlert() {
  setInterval(function() { 
  if (checkVisible($('#footer'))) {
      //alert("I DONT SEE A FOOTER");
      outputString = "EUREKA - I SEE A FOOTER";

    } else {
      //alert("EUREKA - I SEE A FOOTER");
      outputString = "I DONT SEE A FOOTER";
    }
    console.log(outputString)
  }, 5000);
}

Here I've used console.log() rather than alert as alerts are, to be honest, super annoying. This timer also checks if there is a footer and logs accordingly.

Now I've added a bool that is true but when scrolled gets set to false so I only run the above function once when scrolled:

var runOnceScrolled = true;
$(window).scroll(function() {
  console.log('scrolled, timer will now start')
  if (runOnceScrolled) {
    showAlert();
    runOnceScrolled = false;
  }
});

I have also wrapped the contents of your checkVisible in a try catch as it was throwing errors if #footer wasn't there.

I've added a button also, to insert a div with ID of footer just so you can see the console.log() changes after you add the footer.

$('#addFooter').click(function(d) {
  console.log('add footer')
  $("body").append("<div id='footer'>This is the footer</div>")
})

var outputString = "";

function showAlert() {
  setInterval(function() {
    if (checkVisible($('#footer'))) {
      //alert("I DONT SEE A FOOTER");
      outputString = "EUREKA - I SEE A FOOTER";

    } else {
      //alert("EUREKA - I SEE A FOOTER");
      outputString = "I DONT SEE A FOOTER";
    }
    console.log(outputString)
  }, 500);
}

console.log('outputString : ' + outputString)

var runOnceScrolled = true;
$(window).scroll(function() {
  
  if (runOnceScrolled) {
    console.log('scrolled, timer will now start')
    showAlert();
    runOnceScrolled = false;
  }
});

function checkVisible(elm, eval) {
  try {
    eval = eval || "visible";
    var vpH = $(window).height(), // Viewport Height
      st = $(window).scrollTop(), // Scroll Top
      y = $(elm).offset().top,
      elementHeight = $(elm).height();

    if (eval == "visible")
      return ((y < (vpH + st)) && (y > (st - elementHeight)));

    if (eval == "above")
      return ((y < (vpH + st)));
  } catch (err) {
    //console.log(err)
  }
}

.outside {
  color: red;
  border: 1px solid black;
  position: absolute;
  height: 150%;
  width: 100px;
  overflow: scroll;
}

.inside {
  width: 100%;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='addFooter'>
  Add footer
</button>

<div id="outside">
  <div class='inside'></div>
  <div class='inside'></div>
  <div class='inside'></div>
</div>

Working fiddle : https://jsfiddle.net/reko91/xQacd/459/

Did anyone try this code? It'll set the interval many times. `scroll` event is triggered each time you scrolled even one pixel on the page. And since you've put the `setInterval` into the `callback` of `scroll` event, you'll be flooded of alerts. — Adam, Feb 29 '16 at 13:25
@Hbaecklund ive edited the answer. Sorry took a while. I see youve selected an answer so hopefully the least mine will do is give you some tips :) — thatOneGuy, Feb 29 '16 at 14:30

millerbr · Answer 3 · 2016-02-29T13:34:33.093

Repeating every 5 seconds, started by scroll event:

var myTimer;

function showAlert(inString){
    alert(inString);
    myTimer = setTimeout(function() {
        showAlert();
    }, 5000);
}

$(window).scroll(function() {
    clearTimeout(myTimer);
    if (checkVisible($('#footer'))) {
        showAlert("I DONT SEE A FOOTER");
    } else {
        showAlert("EUREKA - I SEE A FOOTER");
    }
});

You can see that I'm using clearTimeout(myTimer) to delete the previous timer, which avoids us starting the timer too many times. For this to work, we have to store the timer first - I've done it in the myTimer variable.

Shows 5 seconds after scroll event but only once:

function showAlert(inString){
    myTimer = setTimeout(function() {
        alert(inString);
    }, 5000);
}

$(window).scroll(function() {
    clearTimeout(myTimer);
    if (checkVisible($('#footer'))) {
        showAlert("I DONT SEE A FOOTER");
    } else {
        showAlert("EUREKA - I SEE A FOOTER");
    }
});

What is the use of `if` and `else` in your answer? you are calling the same funtion in both the case right? — Rino Raj, Feb 29 '16 at 13:31

Javascript setInterval every 5 seconds

3 Answers3