Loop through messages in sequence with a pause in JS/JQuery

Question

I'm putting together an extremely basic script to display messages in a non-profit's reception - all it has to do is iterate through a list of messages, displaying each one for 11 seconds and fade them in and out.

So basically:

message fades in

Welcome! Will be with you shortly

11 second pause

message fades out

message fades in

Keep watching this screen for our latest news and initiatives

11 second pause

message fades out

an so on and so forth. What I have at the moment is this (plagiarised from Displaying array contents on page with a loop in jquery):

var Messages = [
    "TEST 1",
    "TEST 2",
    "TEST 3",
    "TEST 4",
];

function DisplayMessages() {

    var Div = $("#content");

    var startMessage = 0;

    setInterval(function() {
        
        Div.html(Messages[startMessage]).fadeIn().delay(11000).fadeOut();

        startMessage++;

        if(startMessage % Messages.length == 0) {
            startMessage    =   0;
        }
    }, 11000)
}

// run it
DisplayMessages();
</script>

Embarrassingly enough I can't figure out how to fix the timing so that each message fades in and out and displays for 11 seconds in-between. Any help would be appreciated.

Your interval runs every 11 seconds. In addition to every 11 seconds you are delaying the faceOut by 11 seconds. You need to start with an Element, start your Interval and fadeOut the previous item and fadeIn the next one within your Interval — Tim
– Tim, Commented Jul 25, 2020 at 8:08

priyadarshi kumar · Accepted Answer · 2020-07-25 09:02:57Z

0

var Messages = [
    "TEST 1",
    "TEST 2",
    "TEST 3",
    "TEST 4",
];

(function DisplayMessages() {
    var startMessage = 0; 
    displayMessage(Messages[startMessage]); // Display instantly for the first time 
    
    // After some interval 
    setInterval(() => {
      ++startMessage;
      if(startMessage %  Messages.length == 0) {
        startMessage = 0;
      }
      displayMessage(Messages[startMessage]);
    }, 4000);
})();

function displayMessage(message) {
    var Div = $("#content");
    Div.html(message).fadeIn().delay(3000).fadeOut();
}

// run it
// DisplayMessages();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content"></div>

answered Jul 25, 2020 at 9:02

priyadarshi kumar

1923 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richard Over a year ago

Thank you Priyadarshi, this also works perfectly on my PC, but has the same effect as Prakhar's where it doesn't display on the other screen.

Prakhar · Accepted Answer · 2020-07-25 09:32:36Z

0

You have a function running at an interval of 11 seconds. What needs to be done inside this function is:

First fadeOut the current text
Wait for the fadeOut animation to complete
Replace the text
fadeIn the new text

However, just place the first text in the div before starting the interval timer

var Messages = [
  "TEST 1",
  "TEST 2",
  "TEST 3",
  "TEST 4",
];

function displayMessages() {
  var TIMER_INTERVAL = 11000;
  var FADE_INTERVAL = 500;

  var $div = $("#content");
  $div.text(Messages[0]);

  var messageCounter = 1;

  setInterval(function() {
    if (messageCounter === Messages.length) {
      messageCounter = 0;
    }
    $div.fadeOut(FADE_INTERVAL, function() {
      $div.text(Messages[messageCounter]);
      $div.fadeIn(FADE_INTERVAL);
      messageCounter++;
    });

  }, TIMER_INTERVAL)
}
displayMessages();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="content"></div>

edited Jul 25, 2020 at 9:32

answered Jul 25, 2020 at 8:57

Prakhar

1,47510 silver badges15 bronze badges

5 Comments

Richard Over a year ago

Hi Prakhar, this works great on my PC, thank you - can I ask why it doesn't work on the device they're using to display the messages? The useragent is "mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.36 (khtml, like gecko) chrome/73.0.3683.103 safari/537.36" if that helps at all?

Prakhar Over a year ago

I have replaced let and const with var. Try runnning it now. If it does not work then check if that device is connected to internet, because this script downloads jQuery. Without it, an error will be thrown.

Richard Over a year ago

Hmmmm it doesn't seem to cycle through the messages and stays on Test 1

Prakhar Over a year ago

Can you access the console of that device and check if there is an error

Richard Over a year ago

I can't unfortunately, but it's doing the same on my PC and nothing in the console at all..

Collectives™ on Stack Overflow

Loop through messages in sequence with a pause in JS/JQuery

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related