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.

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.

• javascript
• jquery
• setinterval

• depends on at which point in your code do you want the timer to start – Ramanlfc Commented Feb 29, 2016 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 Commented Feb 29, 2016 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 Commented Feb 29, 2016 at 13:29
• @apokryfos yes every 5 seconds from the moment the page is loaded to the end of time. – Hbaecklund Commented Feb 29, 2016 at 13:36
• @praveen 's answer is what you're looking for. – apokryfos Commented Feb 29, 2016 at 13:37

3 Answers 3

You can put in load function

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

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

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/