How to intercept dynamic data draw event in bootstrap modal?

Question

JavaScript

There is some bootstrap modal window with id = "my_modal". I add dynamically filling the body of the dialog box in jquery like this: 1. Create a div id with a span<div class="modal-body"> ... </div>

$('#my_modal .modal-body').append($("<div id='my_test_id'>Имя<span>Значение</span></div>"));

2. Dynamically I fill span And now actually an essence of a problem. "Something there" is taken as the result of executing a chain of promises. That is, some promise has been fulfilled, in its then the span field is updated. In the next then span is updated again. Step by step everything works well. But in real time, apparently, drawing does not have time to work out for asynchronous operations. As a result, in the process of the chain working with a promise, we see span = "Value" and only when the whole chain is working, the result of the last promise is drawn in it. In the bootstrap modal itself, I found only an event for drawing the form (shown.bs.modal). It seems to me that somehow it is necessary to slow down the execution at point 2 until the span is updated. But I don't see how it can be done...$('#my_test_id span').text('Что-то там...');

UPD. Console.log output all the necessary info normally. That is, promises work correctly and return what they need. While working in the modal dialog itself, nothing changes, but the picture in the browser "jumps". This happens apparently every time the span is updated when the promise is processed in then. The question seems to be in the synchronization of drawing and asynchronous threads...

Answer 1

I didn't quite understand the situation. If your promises are running faster than rendering, then why print this intermediate information at all? The user will not have time to read it. Display a loading indicator initially and fill the tag with a value at the very end. Or add a new tag to the end, and hide the previous one with animation - it will be more beautiful.