Wait for data to be added to a Div

Question

Ok, I have a div:

<div class="moreStuff"> <p>stuff in here matters</p></div>

and some Javascript:

weiredFunction(takes,some,values);

this "weirdFunction()" takes some values, does some non-important stuff and adds/appends it to the div.moreStuff.

Directly after "WeirdFunction()" I have my own function:

stuffIWantToDo(...);

the "stuffIWantToDo()" checks the div.moreStuff and reacts according to the data in it.

the problem is that it takes about 300ms for the "weirdFunction()" to do it's buisness and add it's data to the div .moreStuff but my function "stuffIWantToDo()" exicutes before 300ms; meaning there is nothing in the div .moreStuff when "stuffIWantToDo()" runs.

I want to prevent "stuffIWantToDo()" from running untill "weirdFunction()" appends the data to the div.moreStuff.

Sounds like your `weiredFunction` does async stuff, you should post it — tymeJV, Jul 10 '14 at 21:21

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

try make stuffIWantToDo() as a callback function in weiredFunction()

function weiredFunction(callback) {
    // finish the weird thing 

    // Call the callback
    callback('some','stuff','there');
}

function stuffIWantToDo(a, b, c) {
    // I'm the callback
    alert(a + " " + b + " " + c);
}

weiredFunction(foo);

Check this SO post: Create a custom callback in JavaScript

edited May 23 '17 at 12:29

Community

1
1

answered Jul 10 '14 at 21:27

display name

4,165
2
27
52

score 0 · Answer 2 · answered Jul 10 '14 at 21:38

If you are using some jQuery calls, then we need to see it, as @tymeJV already said, look's like you have some async code involve in weiredFunction function

If not, your code must work synchronously and the only thing you need, is call your stuffIWantToDo functionas a callback, or at the end of the first one.

If none of this make sense to you, then use the old and well know setTimeout javascript function

like

function weiredFunction(takes,some,values){

    /* some weired stuff here */

    setTimeout(function() {
        stuffIWantToDo(...);
    }, 300);

}

score 0 · Answer 3 · answered Jul 10 '14 at 21:58

If i understand you right, you have no possibility to change the weiredFunction. Based on that assumption, you have to write a small interval-based observer that fires your function once the content has changed.

var stuffContent = '';
window.setInterval(function() {
    var currentStuffContent = $('.moreStuff').html();
    if(currentStuffContent == stuffContent) return;
    stuffContent = currentStuffContent;
    stuffIWantToDo();
}, 50);

However, it would be the best if you could simply fire stuffIWantToDo within weiredFunction as a callback.

Wait for data to be added to a Div

3 Answers3