2

Lets say I make an Ajax call. The handler for the response could be this:

function handleAjaxResponse(data) {
    //Do changes to the dom, wich takes 2 seconds
}

Until the Response is in coming, everything is fine. The problem is in handling it.

My problem is with the latest Versions of Internet Explorer and Firefox. This browsers, block the UI Process until handleAjaxResponse is full executed. With block I mean, I can do nothing, the website is hanging.

I found out, that Google Chrome has no problem with this.

So is there a way, to repaint the document, without blocking the UI Process in FF and IE?

Christian Gollhardt
  • 16,510
  • 17
  • 74
  • 111
  • So your ajax is asynchronous and working properly, but your DOM manipulations are too heavy? – Bergi May 06 '15 at 19:49
  • 1
    You could break up your DOM repaints into smaller chunks and wrap each one in a `setTimeout(function(){}, 0);` This will push the function to the bottom of the stack and let the browser's UI thread run more frequently and hopefully make it lock up less. – gen_Eric May 06 '15 at 19:51
  • For example I use the plugin `bootstrap-select`, wich is a searchable `select` with 200 items for example. Simple painting this can take 2 seconds. – Christian Gollhardt May 06 '15 at 19:54

1 Answers1

3

Break up the changes to smaller functions and call them as setTimeout callbacks. That way the UI has a chance to handle user input and not hang.

See also:

How can I give control back (briefly) to the browser during intensive JavaScript processing?

Community
  • 1
  • 1
ekuusela
  • 5,034
  • 1
  • 25
  • 43