jQuery each making browser hang when loading objects into scheduler widget

Question

I am using the DHTMLX scheduler. Basically what I am doing is a AJAX GET request to the server to get my data, and then load the events using their method addEvent(). So I have quite a bit of data to load on the scheduler and I understand that this can take time. I can have from 20 to 2500 events to add to the scheduler, I use personnalized query to my server to optimize the request on each view. The GET/AJAX request takes no time. But loading the events in the calendar takes forever and not only does it take a long time, it freezes the browser. I thought the events were loading but weren't showing because it was just slow so I created a progress bar. But I then realized that the browser hangs while doing the loop so I don't even see the spinner I implemented. The only way to see the events actually being loaded and to see the spinner is to add breakpoints like you can see here : enter image description here

Can anyone help me with this? Is there a way to make my code better or at least make the spinner show as it is loading the events? So the user knows what is hapenning? When I add a console.log in the for each I can also see it in the console incrementing, and it does it pretty fast, considering that there's a lot of data it can take between 1 second and 35 or so, and I'm okay with that, I just wish it didn't hang.

Here's my code :

$.each( data, function( key, event ) {

  var eventObj = scheduler.getEvent(event.Activity_Id_int);
  var type = typeof(me.scheduler.getEvent(event.Activity_Id_int));

  if(typeof(me.scheduler.getEvent(event.Activity_Id_int)) === 'undefined')
  {
           var text;
           if(event.Titre != null)      
              text = event.Titre + " " + event.Ressource + '-' + event.Employe;      
           else
              text = event.Ressource + ' - ' + event.Employe;

            me.scheduler.addEvent({
               id: event.Activity_Id_int,
                 start_date: Global.formatDateTime(event.Local_Start_DateTime),
                 end_date:   Global.formatDateTime(event.Local_End_DateTime),
                 text : text,                       
                 color: Global.RandGandB_To_SchedulerRGB(event.Color_R,event.Color_G,event.Color_B),
                 desc_act : event.Desc_Act,
                 priorite: event.Priorite,
                 ressource_id: event.Resource_Id,
                 ressource_name: event.Ressource,
                 textColor: "black"

             });

  }
  n++;      
  progress.update(n/data.length * 100);   
  console.log("Loading these events y'all");  });

Also instead of clearing the events completly when I change view, I just check if the events from the request are already loaded, which increases performance immensly but it still hangs even if I don't add any event aka if I come back to a view where I have already loaded all the events.

how many events in array? Does API allow for adding array of events instead of single ones? A single likely repaints the whole UI, an array of events likely would be handled differently internally — charlietfl, Mar 05 '15 at 14:13
Thanks for the comment @charlietfl, I will look into that, it could be a valid solution. — Paperbag Writer, Mar 05 '15 at 14:28
I found a function to load via array and now it is super fast, only problem is I still can't see my spinner. Guess I can't have it all. Thanks! — Paperbag Writer, Mar 05 '15 at 20:48

score 0 · Answer 1 · answered Mar 05 '15 at 14:37

0

i would consider using for loop insted of $.each for faster performance. you can check this link to see the difference: https://jsperf.com/browser-diet-jquery-each-vs-for-loop

answered Mar 05 '15 at 14:37

Kobi Dadon

141
1
5

The performance gain of a for loop over what is happening inside the loop would be completely negligible – charlietfl Mar 05 '15 at 14:44

jQuery each making browser hang when loading objects into scheduler widget

1 Answers1