Javascript – To execute Flex cleanup function when browser is closed by user

actionscript-3apache-flexhttpservicejavascriptmate

I have a Flex client application. I need a clean up function to run in Flex when the user closes the browser. I found the following solution on the net, but it only works half-way for me. How could I fix it? Thanks in advance for any responses!

Symptoms

CustomEvent triggered, but not executed.
>> EventHandler for CustomEvent.SEND_EVENTS is defined by a Mate EventMap. All the handler does is to call an HTTPServiceInvoker. In debug console, I'm able to see the handler and HTTPServiceInvoker being triggered, but neither the resultHandlers nor the faultHandlers were called. I know this event handler has no problem because when I dispatch the same CustomEvent.SEND_EVENTS in a button click handler, it behaves exactly as I expected)
Browser seems to wait for cleanUp function to complete before it closes. (all traces were printed before browser closes down)

Code

I added the following into the index.template.html

window.onbeforeunload = clean_up;

function clean_up()
{
 var flex = document.${application} || window.${application};
 flex.cleanUp();
}

And used the following in the application MXML file

import flash.external.ExternalInterface;

public function init():void {
ExternalInterface.addCallback("cleanUp",cleanUp);
}

public function cleanUp():void {   

   var newEvent:CustomEvent = new CustomEvent(CustomEvent.SEND_EVENTS);
   newEvent.requestObj = myFormModel;

   dispatchEvent(newEvent);

   // for testing purposes
   // to see whether the browser waits for Flex cleanup to finish before closing down   
   var i:int;
   for (i=0; i<10000; i++){
        trace(i);
   }    

}

My Setup

FlexBuilder 3
Mate MVC Framework (Mate_08_9.swc)
FlashPlayer 10

Best Answer

Unfortunately, there is no solid way of doing such clean up functions that execute asynchronously. The result/fault events of the HTTPService occur asynchronously after the cleanUp method is returned. The browser waits only till the onbeforeunload function (the js clean_up function) returns. Unless you call event.preventDefault() from that function, the page will be closed. Note that calling preventDefault() will result in an ok/cancel popup asking:

Are you sure you want to navigate away from this page?

Press OK to continue, or Cancel to stay on the current page.

If the user selects OK, the browser will be closed nevertheless. You can use the event.returnValue property to add a custom message to the popop.

//tested only in Firefox
window.addEventListener("beforeunload", onUnload, false);
function onUnload(e)
{
   e.returnValue = "Some text that you want inserted between " +
     "'Are you sure' and 'Press OK' lines";
   e.preventDefault();
}

Using performance.now():

var startTime = performance.now()

doSomething()   // <---- measured code goes between startTime and endTime
    
var endTime = performance.now()

console.log(`Call to doSomething took ${endTime - startTime} milliseconds`)

In Node.js it is required to import the performance class

importing performance

const { performance } = require('perf_hooks');

Using console.time: (living standard)

console.time('doSomething')
    
doSomething()   // <---- The function you're measuring time for 
    
console.timeEnd('doSomething')

Note:
The string being passed to the time() and timeEnd() methods must match
(for the timer to finish as expected).

console.time() documentations:

MDN documentation

Node.js documentation

Javascript – How to execute a JavaScript function when I have its name as a string

Don't use eval unless you absolutely, positively have no other choice.

As has been mentioned, using something like this would be the best way to do it:

window["functionName"](arguments);

That, however, will not work with a namespace'd function:

window["My.Namespace.functionName"](arguments); // fail

This is how you would do that:

window["My"]["Namespace"]["functionName"](arguments); // succeeds

In order to make that easier and provide some flexibility, here is a convenience function:

function executeFunctionByName(functionName, context /*, args */) {
  var args = Array.prototype.slice.call(arguments, 2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(context, args);
}

You would call it like so:

executeFunctionByName("My.Namespace.functionName", window, arguments);

Note, you can pass in whatever context you want, so this would do the same as above:

executeFunctionByName("Namespace.functionName", My, arguments);

Symptoms

Code

My Setup

Best Answer

Related Solutions

Javascript – How to measure time taken by a function to execute

Using performance.now():

Using console.time: (living standard)

console.time() documentations:

Javascript – How to execute a JavaScript function when I have its name as a string

Related Topic

`console.time()` documentations: