I have a page with 4 splitters. I only want to receive a layoutChange event for a particular splitter. When I resize the window the layoutChange callback is executed 6 times. Within my callback I need to calculate the height of a pane (the height is auto and cannot be pulled from the splitter reference as far as I know). Height calculation is an expensive operation and there is noticeable delay when this happens 6 times in a row. I would prefer to avoid creating a counter and relying on a condition such as if modulus 6 equals 0, calculate height.
I've created the following fiddle to demonstrate my issue: http://jsfiddle.net/kUvLZ/.
I've created the following fiddle to demonstrate my issue: http://jsfiddle.net/kUvLZ/.
- Is there a better way to bind my callback that will reduce the number of callback executions?
- I don't exactly understand how/why the layoutChange is being triggered like this. Helping me understand it more would probably answer the following related questions
- I understand that the child splitter is probably listening to parent splitter resizes. But why 6 times? Why not 3 or 4?
- Is there a problem with the splitter control that's causing it to fire this many times? I would expect a parent splitter (.references-wrap in my example) to receive all of the layoutChange events from children. I don't expect a child to have to listen to all of the layoutChanges above it.
- Could an alternate bind event be created to make it so that layoutChange listens to all nested calls whereas something like paneLayoutChange would only be triggered once?