JavaScript code execution delay

Question

function append(what) {
    $("#drawer").append(what);
}

function outerHtml(o) {
    return $("<div />").append($(o).clone()).html();
}

var allPixel = [];

$(".pix").each(function() {
    allPixel.push(outerHtml($(this)));
});

$("#drawer").empty();

var index;

for (index = 0; index < allPixel.length; index++) {
    pixel = allPixel[index];
    setTimeout(append(pixel), 100);
}

I have a Container (#drawer) that is full of many div elements. In this function the HTML of each of these div elements gets saved in an array individually. When its done doing that the div element gets cleared.

In the Array allPixel are now all div elements. I want it so that each div element gets added to #drawer with a delay of 100ms.

Problem:

If I run this function nothing happens (the divs are not disappearing/ appearing). What did I do wrong?

If anything is unclear feel free to let me know and I will edit my question.

Question aswered... See it in action: https://wiese2.lima-city.de/test/

Ok, first of all, your setTimeout call is wrong, the first argument should be a function not a function call. Secondly, do you want to add all pixels at the same time after 100ms or each pixel to be added after 100ms of adding the previous one? — M0nst3R
– M0nst3R, Commented Nov 30, 2017 at 18:04

M0nst3R · Accepted Answer · 2017-11-30 18:05:44Z

2

You are invoking the method invoking immediately and passing its return value i.e. undefined to setTimeout.

You can set additional parameters to be passed to append function when timer expires to setTimeout method.

Use

setTimeout(append, 100 * (i + 1), pixel);

Additionally you also need to increase timer based on element index

edited Nov 30, 2017 at 18:05

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

answered Nov 30, 2017 at 18:00

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Milan Over a year ago

Thank you so much! Now it works perfectly! (I used "setTimeout(append, 10*index, pixel)")

Collectives™ on Stack Overflow

JavaScript code execution delay

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related