Waiting for Experience Editor SheerResponse.Eval to Complete before Auto Save

Question

I have a custom experience button which copies a rendering datasource and then updates the rendering layout definition to use the new datasource. It then tries to auto-save and refresh the page. This works some of the time but not all of the time unfortunately. I think this is because the chrome:rendering:properties function call eventually calls editPropertiesResponse() which does and ajax request to update the rendering definition and sometimes this isn't happening before the save kicks in:

//update the interface and save and refresh the page
SheerResponse.SetAttribute("scLayoutDefinition", "value", 
Sitecore.Web.WebEditUtil.ConvertXMLLayoutToJSON(updatedLayoutDefinition.ToXml()));
SheerResponse.SetModified(true);                                
SheerResponse.Eval("window.parent.Sitecore.PageModes.ChromeManager.handleMessage('chrome:rendering:propertiescompleted');");
SheerResponse.Eval("window.top.onbeforeunload = null;");                                            
SheerResponse.Eval("window.parent.Sitecore.PageModes.PageEditor.save('save');");

I have tried putting thread waits in before the save and also using async, await to make the save happen after the ajax request completes but none of this seems to work.

Does anyone have any ideas how to ensure the commands run one after the other?

Other Info: Sitecore 8.2 u7

Answer 1

Saving to the item layout field directly like so works but causes a full reload of the page, I was ideally looking for something that only refreshed the component in the page and not the entire page:

LayoutField finalLayoutField = new LayoutField(Context.Item.Fields[Sitecore.FieldIDs.FinalLayoutField]);
Context.Item.Editing.BeginEdit();
finalLayoutField.Value = updatedLayoutDefinition.ToXml();
Context.Item.Editing.EndEdit();                                     
SheerResponse.Eval("window.top.location.reload();");