We have a page where there are 10 categories displaying like accordions so when you click on them they open and display the inputs for each category and allow them to be edited and saved.  We had a button to Edit All of the accordions which would call the onclick function for each of the Categories/Accordions and open them all at once. When clicked individually there was no issue but when the Edit All button was clicked the page would lock up and become unresponsive and we would get a blank white space from half the page down.  If you waited long enough you would get the net::ERR_INCOMPLETE_CHUNKED_ENCODING error when watching it in the console.

When googling for solutions to this issue many mentioned a newer feature in Chrome labeled: Prefetch resources to load pages more quickly.  Since requiring users to turn off this option was not a valid solution I looked into setting a meta tag in the header to turn this option off.  This did not resolve the issue.  Some possible solutions also mentioned turning off a setting for some Anti Virus programs but this was also not a valid solution since we could not require it from end users.  I also discounted setting the content-length for the headers since at this point the headers had already been sent.

Another possible cause for the issue was that the server might not be sending the terminal 0-length chunk.  I found one area within the code that had an ob_start() without an end. Tried adding several flavors of ob_end and even ob_flush and this did not resolve the issue.

Next I looked into determining how many of the accordions could be clicked at the same time before the error was caused. It turned out that 9 could be clicked without the error and it was not any specific accordion causing the error. I also determined that the process of opening them started slowing down around 6-7 at the same time.  I wrote a loop calling a function using setTimeout that would set a class groupsopening on a subset of the accordions needed to be opened that did not already have that class and just open them.  Then I would bump up the setTimeout time and run the function again and loop until all of the accordions were open.  I ran into issues with this method where the accordions would all still try and open at the same time.  I believe the issue was related to calling setTimeout with the same function but I’m not completely sure.  I had that feeling based on some research into the setTimeout function.

Next I tried using the setInterval method and setup a function to be called every 200ms. I added a global variable to keep track of how many times the function had been called and cleared the interval if it was over 50 because I determined if it ran this many times it would be in an infinite loop.  Next I added a check for tables inside each of the accordions (which would only be added after the accordion was open) with the new groupsopening class and returned if some still needed to be opened. Then added code to pull accordions without the new class.  If there were no accordions without the new class then we were done and I cleared the interval.  If there were still some accordions without the class I marked another subset with the new class and called the click function to open them.  This resolved the issues and prevented the error.