Q: Executing synchronous work asyncronously in javascript Any way to the the following?
I need to call an ActiveX method that executes synchronously on the client. The problem starts in case this call takes too long to finish, so I want to terminate waiting for the response this method would return, but not an ActiveX method itself (since this is a third party component and has no such ability).
The other problem is I dont have that ActiveX here on the development enviornment, only on the production one, so I simulate calling the method with a simple synchronous request to a httphandler (asp.net generic handler) which holds the thread for 10 seconds and then returns the result like:
public void ProcessRequest(HttpContext context)
    {
        int interval = 10;
        try
        {
            interval = int.Parse(context.Request["interval"]);
        }
        catch
        {
        }
        Thread.Sleep(interval * 1000);

        context.Response.Write("+OK");
    }

So when I say 'tried to call ActiveX method', what I mean is 'I made a synchronous call to the server and it gives me a response after 10 seconds'.
Here are the things I already tried
1) Since JavaScript does not support multihreading, I tried calling some dummy url asynchronously first and then, after receiving a response (asynchronously), I tried calling the ActiveX method. The problem here is, once a browser calls the method, the entire page becomes unresponsive. Here is the code:
$.ajax({
url:'../test/ThreadSleep.ashx',
async:true,
data:{ interval: 2 },
success: function(response){
    // here is the actual simulation of the ActiveX method call
    $.ajax({
        url:'../test/ThreadSleep.ashx',
        async:false,
        data:{ interval: 15 },
        success: function(response){
            console.log(response);
            alphaActiveX.xml = getAlphaXml();
        }
    });
}

});
2) The second solution was to try opening another page in an iframe. This page would make an ActiveX call and since the call would be made on a different page, my main page should remain responsive. This also does not work. Once the iframe page makes the call, the main page becomes unresponsive.
Here is the javascript that opens the page:
 $('').dialog({
                        width:300,
                        height:200,
                        modal:true,
                        title:'Calling ActiveX component',
                        buttons:[
                            {
                                text:'Close',
                                click:function(){
                                    $(this).dialog('close')
                                }
                            }
                        ],
                        close: function(){
                            $(this).dialog('destroy');
                        }
                    });
and here is the javascript code that runs on page dom ready:
    $(function() {
        if (window.location.href.indexOf('completed=1') == -1) {
            //console.log(response);
            setTimeout(function() {
                $.ajax({
                    url: 'ThreadSleep.ashx',
                    async: false,
                    data: { interval: 15 },
                    success: function(response) {
                        //console.log(response);
                        //alphaActiveX.xml = getAlphaXml();
                        window.location.href = 'iframeActiveX.aspx?completed=1'
                    }
                });
            }, 1000);
        }
    });

3) I tried calling this page with window.open(''), I thought, since this would be a new page, maybe my page will remain responsive, but I was wrong.
4) The same thing happens event if I try opening this page in an entirely new browser window like:
$('<div><a href="../test/iframeActiveX.aspx" target="_blank">Call the ActiveX component</a></div>').dialog({

                    width:300,
                    height:200,
                    modal:true,
                    title:'Calling ActiveX component',
                    buttons:[
                        {
                            text:'Close',
                            click:function(){
                                $(this).dialog('close')
                            }
                        }
                    ],
                    close: function(){
                        $(this).dialog('destroy');
                    }
                });

Any help would be very much appreciated.
Thanks
