How to delay addition of elements to the DOM in Javascript event handler

Question

I use pure JavaScript no libraries I am newer to client side programming and especially to JavaScript.

I have my client side window delimited to the left and right side.

At some point when user press button completeTask event handler is fired.

The event handler adds two HTML elements one on left side another on right side of window with delay about 3000msec.

Here is conceptual description of event handler:

        function completeTask() 
        {
            addSomeElemntToLeftSide(); 
            delay(3000);
            addSomeElemntToRightSide();
        }

The problem is that both HTML elements have been added to the DOM after event handler is executed without any delay.

Any idea what should I do to make delay between adding two elements left and then after 3000msec right?

Javascript does not have a `delay()` function. For something like this you would want to use `setTimeout()`. — Sverri M. Olsen, Aug 31 '15 at 14:24

score 3 · Accepted Answer · answered Aug 31 '15 at 14:25

Javascript does not have a delay() function. For something like this you would want to use setTimeout, like so:

function completeTask() {
    addSomeElemntToLeftSide(); 
    setTimeout(addSomeElemntToRightSide, 3000);
}

The addSomeElemntToRightSide function is passed to setTimeout, which will run it in 3000ms (3 seconds). You could also write it like this:

function completeTask() {
    addSomeElemntToLeftSide(); 
    setTimeout(function () {
        addSomeElemntToRightSide();
    }, 3000);
}

DZanella · Answer 2 · 2015-08-31T14:33:01.790

1

Simple...

function completeTask() 
        {
            setTimeout(addSomeElemntToLeftSide,3000); 

            setTimeout(addSomeElemntToRightSide,3000);
        }

if you only want a delay between the two calls, use the setTimeout only in second call...

edited Aug 31 '15 at 14:33

answered Aug 31 '15 at 14:25

DZanella

243
1
8

You are calling the functions as you pass them into `setTimeout()`... – Sverri M. Olsen Aug 31 '15 at 14:26
This is incorrect. By including the ( ) after the function calls, they are called immediatley. You need to remove the ( ) so that the call to setTimeout includes the function name, not a call. – bitfiddler Aug 31 '15 at 14:30
You are rigth! corrected... – DZanella Aug 31 '15 at 14:33

score 1 · Answer 3 · answered Aug 31 '15 at 14:25

1

You could use setTimeout():

setTimeout(addSomeElemntToRightSide, 3000);

The second parameter is the time you wish to wait in milliseconds.

answered Aug 31 '15 at 14:25

user2121620

678
12
28

How to delay addition of elements to the DOM in Javascript event handler

3 Answers3