js, delaying a function

Question

So, I have two js functions:

First js appends a new div container. Second js does something to this new div:

Example:

my_html = '<div class="second"></div>'
jQuery('.first').html(my_html);
jQuery('.second').html("Yay");

Here is the issue. The second js function relies on the existence of class "second".

However, both are run even before the my_html is populated, so I never get "yay" as the result.

Is there a way to somehow delay till the first function is completed? (meaning there is the second div).

EDIT:

Here is the code (please assume that all the code works)

 var THIS_FUNCTION= function (data) {           
    MY_VAR.push("some data");
    alert("before: " + MY_VAR);
 };
 if (//Some condition met) {            
    alert("first function");
    SOME_FUNCTION(THIS_FUNCTION);           
 }; 
 alert("After: " + MY_VAR);

This is the sequence of alerts that I get:

Alert 1: "first function"
Alert 2: "After:"
Alert 3: "before: some data"

The "before" alert should come in first but I am getting it last.

What am I doing wrong?

That code run synchronously, that code actually works, "second" exists when you're running jQuery('.second').html("Yay"); Show your actual code. — Marcos Casagrande, Jan 24 '16 at 22:05
Hmm, i will just double check that this is not the problem. Thanks. — Steve Kim, Jan 24 '16 at 22:06
Possible duplicate of [JQuery: Selecting dynamically created elements and pushing to Firebase](http://stackoverflow.com/questions/17561243/jquery-selecting-dynamically-created-elements-and-pushing-to-firebase) — Gavriel, Jan 24 '16 at 22:06
As @MarcosCasagrande said, the code looks fine and should work as you are expecting. Do you have your JS code wrapped inside the [$(document).ready()](http://api.jquery.com/ready/) function? That will delay the code until the body structure is ready. Either that or move your JS code to the end of the tag. — mattdevio, Jan 24 '16 at 22:16
@steveKim, you'd rather delete those edits. It made it worse. Give us real code. The one you added doesn't work. MY_VAR is not declared — Gavriel, Jan 24 '16 at 22:20
I am surprised to see that none of the answers are helpful. I think that is because the question is poorly worded. Yes, please make a fiddle so we will understand. To all those requesting setTimout()... smh — mattdevio, Jan 24 '16 at 22:23
@steveKim, the (broken) code you added has hardly if anything to do with the jQuery code at the beginning. Please delete it, and make a new question with your 2nd problem, which seems to be something totally different. And BTW it looks like a homework, if you can't provide us actual code... — Gavriel, Jan 24 '16 at 22:24
I am creating a fiddle. And it is not a homework. The code is too complicated and long to put it here. I will update and delete inappropriate section soon. — Steve Kim, Jan 24 '16 at 22:26
Just figured out why it was happening. I had an external function and it was skipped till everything else was run. Thanks for the help guys! =) — Steve Kim, Jan 24 '16 at 22:46

score 2 · Accepted Answer · answered Jan 24 '16 at 22:14

2

You don't need to do anything, it should work, here's a jsfiddle link that proves your example works without changes

But, alternatively you can also do this:

my_html = '<div class="second"></div>'
$(my_html).filter(".second").html("Yay").appendTo(".first");

Here's the link for the second example

answered Jan 24 '16 at 22:14

Rui

4,847
3
29
35

I included functions to my post. Could you take a look at it for me? Thanks! – Steve Kim Jan 24 '16 at 22:20
You say the "before" alert should come first, but that might not be correct. For example, if in SOME_FUNCTION there's an asynchronous call, e.g. `$.get(someUrl).done(THIS_FUNCTION)` you'd get the behaviour you describe. – Rui Jan 24 '16 at 22:25

tede24 · Answer 2 · 2016-01-24T22:15:15.303

-1

As for delaying:

setTimeout(yourFunction, 1);

Also in your example you can chain after first query object instead of start a second selector:

jQuery('.first').html(my_html)
      .filter('.second').html("Yay");

edited Jan 24 '16 at 22:15

answered Jan 24 '16 at 22:10

tede24

2,304
11
14

1

Very bad solution to use timeouts! He doesn't meant to "delay" the 2nd function, just until the 1st one finished. In terms of waiting for an "async" (which .html() is not BTW) function to finish and then call a callback – Gavriel Jan 24 '16 at 22:15

js, delaying a function

2 Answers2