0

UPDATE

I think I have to be a little more precise.

I have this long running code that adds content to my DIVs. This is an example of the code:

m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);

The Problem is that this can really take a while because sometimes I am adding 100 items. And the content only appears on the page after all 100 items have been added. So the user had to wait like 30 seconds or so.

What I would like to is to update the #test2 - DIV after adding 10 elements or so and then continue adding elements

Is there a way to refresh the DOM or (better) refresh the test2 - DIV and then continue adding Elements ?

OLD Description

I have a long running jQuery method that clones DIVs and appends them to the page. It looks like this:

m = jQuery('#test').clone();
//do some work
jQuery('#test2').append(m);

This code is called several times (sometimes up to 100 times) and it takes pretty long for the content to appear in the page.

Is there a way to refresh the dom and print the content onto the page so that the user is not getting bored because nothing happens ?

Breiti
  • 579
  • 5
  • 21
  • we would need to see a lot more code to advice you on how easy/practical that will be. could be a snap, could be next to impossible. most likely, it's closer to a snap, but who knows? – dandavis Feb 07 '15 at 23:07
  • 1
    How about using a fragment, or a parent element etc. and create the structure before it's appended. Creating the elements shouldn't take long, a few hundred elements would generally only take milliseconds, what's taking long is constantly changing the DOM, which is a horrible way to do things, replace everything in one go. – adeneo Feb 07 '15 at 23:11
  • I´ve added an update comment ... – Breiti Feb 08 '15 at 10:56

2 Answers2

2

You can do what you want using setTimeout. It's like the same logic we use for doing animations.

// Code goes here
function load(index) {
    var m = jQuery('#test').clone();
    m.html("Element" + index)
    jQuery('#test2').append(m);

    if(index < 100) {
       setTimeout(function() {
         load(index + 1);
       },100); 
    }
}

$(document).ready(function(){
  load(0);
});

here is a plunker

nanndoj
  • 6,580
  • 7
  • 30
  • 42
  • Hi - forgive my question, but my is a timeout helping in this case ? Doesn´t it delay everything even more ? – Breiti Feb 08 '15 at 10:57
-1

This is not exactly what you want, but why don't you put a spinner on your page whilst this is loading, which then goes away when the operations are done? It may be a cleaner method of doing things rather than the page just randomly refreshing for the user whilst they are using it.

TRex22
  • 47
  • 7
  • 1
    This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post - you can always comment on your own posts, and once you have sufficient [reputation](http://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](http://stackoverflow.com/help/privileges/comment). – apaul Feb 07 '15 at 23:44
  • 1
    The crux of the question from what I gathered was what can I do so that the user is not bored when waiting for new content? The author's idea of refreshing the DOM is not good design practice. – TRex22 Feb 07 '15 at 23:46
  • I'm not disagreeing with you. Your answer showed up in the Low Quality Review queue because someone flagged it. It probably should have been a comment and not an answer. – apaul Feb 07 '15 at 23:49
  • OP wants to keep the user from getting bored. It seems totally fair game for an answer to address this at a UX/design level. – paulmelnikow Feb 07 '15 at 23:51