1

I have a small function to show some data to an user that looks like this.

function message(msg) {
    
  var html = '<div class="reply" style="display: flex;"><div class="avtar-img"><img class="ChatItem-avatarImage" id="ct_img" src="'+ui_obj.logo+'"></div><p id="Log">'+
  msg.msg_text +
  '</p>'+
  '<span class="chat-time">'+ formatAMPM(new Date) + '</span></div>';
  return html;
}

Then I have this image

<img src="loading.gif" class="float-left">

What I want to achieve is that the loading image is shown for 3 seconds and then to hide it and show the other content of the function.

The whole thing has to happen within the message function itself.

I have tried to delay the execution of the code, creating another function within the message function and using setTimeout(function, 3000) to delay it, but somehow can't achieve that.

So, in short, what I am trying to achieve is:

  • show loading.gif for 3 seconds and hide it
  • show the content of the message function
  • and everything must happen within the message function

Any idea how can I do it?

lStoilov
  • 1,256
  • 3
  • 14
  • 30
  • Does this answer your question? [jQuery show for 5 seconds then hide](https://stackoverflow.com/questions/3428766/jquery-show-for-5-seconds-then-hide) – kmoser Jan 05 '21 at 08:29
  • I was looking at that but didn't help too much – lStoilov Jan 05 '21 at 08:33
  • Is necessary to `return` from function you can put your code inside `setTimeout` and add the generated html to some divs inside callback of it or [this](https://stackoverflow.com/a/24929146/10606400) is another solution . – Swati Jan 05 '21 at 13:35

0 Answers0