0

I want to insert some html asynchronously into the page, and then execute some javascript codes correlated with the inserted DOM.

This kind of endeavour always fail because DOM rendering in the browser takes much more time than the next javascript codes to execute.

I have met with such problem before and have asked a question, but nobody answered. It's here: https://stackoverflow.com/questions/31935005/whats-going-on-with-dom-after-orientationchange-event

So, can I get a promise or attach some callback function?

Codes here:

var bubble = function bubble(type,content){
    var myScroll, temp = document.createElement('div');
    temp.innerHTML=content;
    temp.className=type==='time'?'time':'bubble '+type;
    document.getElementsByClassName('dialogue')[0].appendChild(temp);
    if(type==='reply')myScroll = new IScroll('.dlg-wrapper', { mouseWheel: true });
};
Community
  • 1
  • 1
Yan Yang
  • 1,804
  • 2
  • 15
  • 37
  • How did you do this asynchronously inserting and how did you respond to it. Please show your code. – GolezTrol Nov 28 '15 at 09:30
  • @GolezTrol Codes added. In fact it's always like this whatever the codes are, as long as it manipulates the DOM so that causes rerendering and then accesses them immediately in javascript. You can see the same thing in the linked question I mentioned. – Yan Yang Nov 28 '15 at 09:40
  • So which part of this code is being called too early? I see nothing asynchronous happening here. – GolezTrol Nov 28 '15 at 09:42
  • Of course the code immediately after DOM inserting. – Yan Yang Nov 28 '15 at 09:43
  • @GolezTrol Well, I think you don't understand browser behaviors very well. – Yan Yang Nov 28 '15 at 09:44
  • The rendering after inserting is asynchronous. – Yan Yang Nov 28 '15 at 09:45
  • 1
    No it's not. It's just postponed until your script is idle. That's also what the answer [of this question](http://stackoverflow.com/questions/9838003/synchronous-asynchronous-nature-of-browser-rendering-and-javascript-execution) suggest, which by the way also suggest using `setTimeout` as a solution. – GolezTrol Nov 28 '15 at 10:12
  • @GolezTrol I'm sorry. It's true that the problem I said can't be clearly seen in my code. I met such problem because IScroll needs to know `.dialogue`'s height to decide how to enable scrolling inside `.dlg-wrapper`. I appended a child dom into `.dialogue` so that it's height will be higher. But scrolling inside `.dlg-wrapper` initialized before the height change. – Yan Yang Nov 28 '15 at 13:22

2 Answers2

1

As far as I know, there is not such an event one could listen. But you can do something normally used for animation. To keep animations run smoothly at a high rate it nessesary to batch all DOM Access as FastDom.js tries to abstract away.

All in all, the weapon of choice should be requestAnimationFrame() to schuedle your DOM access to a Frame, where the browser has updated the DOM.

In your case, new IScroll(...) needs to be schuedled until querySelector('.dlg-wrapper') actually returns the desired element.

philipp
  • 15,947
  • 15
  • 61
  • 106
0

I don't think rendering is asynchronous, but it is triggered by a message that is only processed after the script ended.

But you said "and then execute some javascript codes correlated with the inserted DOM.". I don't see that happening in your code.

Anyway, if you use setTimeout(callback, 0) you can do the post-processing in callback. setTimeout is also controlled by that message queue, so after the code that modified the DOM is finished, the browser will first process the redraw message (because that is first in the message queue), and only then call the callback.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • setTimeout won't work. I tried here in this problem, and I have also tried in this question: http://stackoverflow.com/questions/31935005/whats-going-on-with-dom-after-orientationchange-event – Yan Yang Nov 28 '15 at 13:25
  • At least, it's not synchronous, is it? Did I misunderstand the concepts? – Yan Yang Nov 28 '15 at 13:29
  • It's message based. Changing the DOM will queue a message, which is processed not asynchronously to your script, but after the script has ended. So yes, you misunderstood the concepts. – GolezTrol Nov 29 '15 at 14:30