How to trigger an action after setTimeout JavaScript

Question

I'm creating a function named preLoader() and I'm using setTimeout() cause I want to make it run for one time only.
When the preloader() function finish, I want to hide:

<div class="loader">
 <h2 id="loading">0%</h2>
 <h3 id="pleaseWait"></h3>
</div>

and show:

<div class="mainContent"></div>

So you just want to wait a certain time before hiding/showing these element? — Rico Ocepek
– Rico Ocepek, Commented Sep 19, 2015 at 10:16
Simply add statements $("loader").hide(); and $("mainContent").show(); at the end of the preLoader function. — HashPsi
– HashPsi, Commented Sep 19, 2015 at 10:16
Is there a reason you can't just change preloader? Pass a callback into preloader and call that when finished. — fdomn-m
– fdomn-m, Commented Sep 19, 2015 at 10:17

Artur Filipiak · Accepted Answer · 2015-09-19 11:15:21Z

Since you're using animate(), You don't really have to use both setTimeout and setInterval. Simply hide/unhide content in a complete callback of the animation.

function preLoader(){
    // animating numbers
    var arrayPleaseWait = ['P','L','E','A','S','E', ' ' , 'W','A','I','T','.','.','.'];
    var searchReturn = '';
    var current = null;
    var wait = $('#pleaseWait');

    $('body').css({
        'backgroundColor':'#E2F7FA'
    });
    $('.mainContent').hide();

    $('#loading').animate({
        someValue: 100
    },{
        duration: 10000,
        easing:'swing',
        step: function() {
            var l = Math.round(Math.round(this.someValue) * (arrayPleaseWait.length-1) / 100) || 0;
            if(current != l){
                searchReturn = searchReturn + arrayPleaseWait[l];
                wait.text(searchReturn + '|');
                current = l;
            }
            $(this).text(Math.round(this.someValue) + '%');
        },
        complete : function(){
            $('.loader').hide();
            $('.mainContent').show();
        }
    });

}

preLoader();

JSfiddle demo

WriteYour NameHere · Accepted Answer · 2015-09-19 10:42:31Z

1

this is the HTML code:

<div class="loader">
  <h2 id="loading">0%</h2>
  <h3 id="pleaseWait">pleaswait</h3>
</div> 
<div class="mainContent" hidden="true">ok</div>

JavaScript:

var executed = false;
setTimeout(function() {
    if(!executed) {//the same of if(executed == false) 
        var loader = document.getElementsByClassName('loader')[0];
        var mainContent = document.getElementsByClassName('mainContent')[0]
        loader.hidden = "true";//hide the loader
        mainContent.removeAttribute("hidden");//show the mainContent
        executed = true;
    }
}, 1000);

answered Sep 19, 2015 at 10:42

WriteYour NameHere

471 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to trigger an action after setTimeout JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related