How can I call a server-side action from my lightning component and execute immediately?

Question

My lightning component has a button that shows a dialog when clicked. To show that dialog, i need to call a server-side action and parse the response. When I enqueue the action, it takes a long time to execute - or sometimes it seems I have to click the button twice to batch another request before it's processed. I need this to be responsive to the user - no one's going to wait 10 seconds for this action to be dequeued. What can I do to execute this immediately from my helper? Here's my code:

MyComponentRenderer.js

({
    afterRender: function(component, helper) {
        this.superAfterRender();

        // listen to iframe messages
        this.processMessageWrapper = function(e) {
            helper.processMessage(e, component);
        }
        addEventListener("message", this.processMessageWrapper, false);
    },

    unrender: function(component, helper) {
        this.superUnrender();
        window.removeEventListener("message", this.processMessageWrapper);
    },

    processMessageWrapper: function(e) {}
})

MyComponentHelper.js

({
  processMessage: function(e, component) {
    var getValidHostsForOrg = component.get("c.getValidHostsForOrg");

    getValidHostsForOrg.setCallback(this, function(response) {
      var state = response.getState();
      if (state === "SUCCESS") {
        var isValidOrigin = false;
        var validOrigins = response.getReturnValue();
        var host = this.extractHostname(e.origin);

        for (var i = 0; i < validOrigins.length; i++) {
            if (host.match(validOrigins[i])) {
              isValidOrigin = true;
              break;
            }
        }

        if (!isValidOrigin)
          return;

        var eventName = "e." + e.data.eventName;
        var eventArgs = e.data.eventArgs;
        var event = $A.get(eventName);
        if (event) {
            event.setParams(eventArgs);
            event.fire();
        }

      } else if (state === "ERROR") {
          var errors = response.getError();
          if (errors) {
              if (errors[0] && errors[0].message) {
                  console.log("Error message: " + 
                           errors[0].message);
              }
          } else {
              console.log("Unknown error");
          }
      }
    });

    $A.enqueueAction(getValidHostsForOrg);
  },

  extractHostname: function(url) {
    var hostname;
    //find & remove protocol (http, ftp, etc.) and get hostname

    if (url.indexOf("://") > -1) {
      hostname = url.split('/')[2];

    } else {
      hostname = url.split('/')[0];
    }

    //find & remove port number
    hostname = hostname.split(':')[0];
    //find & remove querystring
    hostname = hostname.split('?')[0];

    return hostname;
  }
})

MyComponent.cmp

<aura:component access="global" controller="ServerSideController" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:hasSObjectName">

    <!-- designer attributes -->
    <aura:attribute access="global" name="objectName" type="String" default="Opportunity" required="true"/>
    <aura:attribute access="global" name="relationshipName" type="String"/>
    <aura:attribute access="global" name="height" type="Integer" default="600" />
    <aura:attribute access="global" name="viewID" type="String" />
    <!-- internal attributes -->
    <aura:attribute name="vfUrl" type="String" />

    <div class="container" style="{!'height:' + v.height + 'px;'}">
        <iframe class="iframe" aura:id="vfIframe" seamless="true" src="{!v.vfUrl}"></iframe>
    </div>

    <aura:handler name="init" action="{!c.auraInit}" value="{!this}"/>
</aura:component>

Answer 1

There was definitely something wrong with my code. The queue shouldn't take that long to process my request. I was missing a $A.getCallback() around my processMessageWrapper(). It executes immediately now.

({
    afterRender: function(component, helper) {
        this.superAfterRender();

        // listen to iframe messages
        // I WAS MISING THIS CALL TO $A.getCallback()
        this.processMessageWrapper = $A.getCallback(function(e) {
            helper.processMessage(e, component);
        });

        addEventListener("message", this.processMessageWrapper, false);
    },

    unrender: function(component, helper) {
        this.superUnrender();
        window.removeEventListener("message", this.processMessageWrapper);
    }
})