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.

Answer 1

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/

Answer 2

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

Answer 3

You can put in load function

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