Unable to display a persistent load indicator while my time-taking plugin code is executing

I wrote a jquery plugin which filters the given dropdown's options as per the inputText specified and sorts them by number of words matched, with highest matches at the top. And this takes some time to execute (probably needs some study of the code to find if any optimization is possible). There is no ajax call inside my plugin code, pure client side logic. So, right now I need to display a load indicator. My problem is that I am not able to properly display a load indicator which persists while the filtration/sorting code executes.

Please note - My question here is not how to optimize the code but to display a persisting load indicator.

Here was my initial plugin code architecture -

(function($) {
    // jQuery plugin definition

    $.fn.filterGroup = function(config) 
    {

        var settings = {
                            //some settings defined here
                       };


            var thisDropdown = this; //master  copy

        if(config)
        {
            $.extend(settings, config);
        }

            this.each(function() 
            {      
                thisDropdown = filterGroupOptions(filtrableDropdown,inputText,settings,ignoreText);


            });

        // allow jQuery chaining
        return thisDropdown;
    };


    function filterGroupOptions(filtrableDropdown,inputText,settings,ignoreText)
    {
       //here is my main plugin code which filters the given dropdown options as per the inputText specified, and this takes some time to execute
    }

Now, because of the time taken by the filtration/sorting code, I need to display a load indicator while the filtration logic takes place, but I am so far not able to do that. At first I added a displayLoadIndicator() in the beginning of the code inside the this.each(function(){} and a hideLoadIndicator() at the end of the code insde the same this.each(function(){}. By displaying alerts at those points, I could see the the load indicator displayed and removed. I observed that even when the browser was hanging sometimes (with too many words entered for search term (inputText) was displaying Not Responding). So, I guessed may be I needed to add a callback to my code and call hideLoadIndicator() when I receive the callback, but still the load indicator does not persist. (updated plugin code)-

(function($) {
    // jQuery plugin definition

    $.fn.filterGroup = function(config) 
    {

        var settings = {
                            //some settings defined here
                       };


            var thisDropd开发者_JS百科own = this; //master  copy

        if(config)
        {
            $.extend(settings, config);
        }

        this.each(function() 
        {      
                 showLoadIndicator();


                 //see I am calling hideLoadIndicator(); on receiving callback here 
         filterGroupOptions(filtrableDropdown,inputText,settings,ignoreText,function(returnVal)
        {
            thisDropdown = returnVal;
            hideLoadIndicator();

            // allow jQuery chaining
            return thisDropdown;
        });


        });


    };

    function filterGroupOptions(filtrableDropdown,inputText,settings,ignoreText,callback)
    {
           //here is my main plugin code which filters the given dropdown options as per the inputText specified, and this takes some time to execute
             callback(filtrableDropdown);
    }

Previously, I added I added callback like this when there was an AJAX call whose response was taking time. But, never faced an issue like this where pure client side code is taking time...

Any pointers will be appreciated...

Updates

If possible at least describe the reason behind the phenomenon I am observing. Strange but I have to ask does adding a callback here makes sense?

Thanks

Try to add timeouts in your parts of the code to see the load indicator. This happens because JavaScript execution is faster than dom rendering so before we see anything the execution is complete and hide method hides the loading indicator

Try this:

(function($) {
// jQuery plugin definition

$.fn.filterGroup = function(config) 
{

    var settings = {
                        //some settings defined here
                   };


        var thisDropdown = this; //master  copy

    if(config)
    {
        $.extend(settings, config);
    }

    showLoadIndicator();

    setTimeout($.proxy(function(){

        this.each(function() 
        {      



             //see I am calling hideLoadIndicator(); on receiving callback here 
    filterGroupOptions(filtrableDropdown,inputText,settings,ignoreText,function(returnVal)
    {
        thisDropdown = returnVal;
        hideLoadIndicator();

        // allow jQuery chaining
        return thisDropdown;
    });

    //here is my main plugin code which filters the given dropdown options as per the inputText specified, and this takes some time to execute

    });

  }, this), 100);

};