Невозможно отобразить индикатор постоянной загрузки, пока выполняется код моего плагина - PullRequest
Новая
       28

Невозможно отобразить индикатор постоянной загрузки, пока выполняется код моего плагина

1 голос
/ 08 августа 2011

Я написал плагин jquery, который фильтрует параметры данного раскрывающегося списка в соответствии с указанным inputText и сортирует их по количеству совпадающих слов с самыми высокими совпадениями в верхней части.И это требует некоторого времени для выполнения (вероятно, требуется некоторое изучение кода, чтобы найти возможную оптимизацию).В моем коде плагина нет вызова ajax, чисто логика на стороне клиента.Итак, сейчас мне нужно отобразить индикатор загрузки.Моя проблема в том, что я не могу правильно отобразить индикатор загрузки, который сохраняется во время выполнения кода фильтрации / сортировки.

Обратите внимание - Мой вопрос здесь не в том, как оптимизировать код, а в том, чтобы отобразить индикатор постоянной загрузки.

Здесь была моя начальная архитектура кода плагина - 

(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
    }

Теперь, из-за времени, затрачиваемого на код фильтрации / сортировки, мне нужно отображать индикатор загрузки во время логики фильтрацииНо я пока не могу этого сделать.Сначала я добавил displayLoadIndicator () в начале кода внутри this.each(function(){} и hideLoadIndicator() в конце кода insde this.each(function(){}.Отображая оповещения в этих точках, я мог видеть индикатор загрузки, отображаемый и удаляемый.Я заметил, что даже когда браузер иногда зависал (слишком много слов, введенных для поискового запроса (inputText), отображало Not Responding).Итак, я догадался, может быть, мне нужно было добавить обратный вызов в мой код и позвонить hideLoadIndicator(), когда я получу обратный вызов, но индикатор загрузки все еще не сохраняется.(обновленный код плагина) - 

(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() 
        {      
                 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);
    }

Ранее я добавил, что добавил обратный вызов, как это, когда был AJAX-вызов, ответ на который занимал время.Но никогда не сталкивался с такой проблемой, когда чистый код на стороне клиента требует времени ...

Любые указатели будут оценены ...

Обновления
ЕслиМожно хотя бы описать причину явления, которое я наблюдаю.Странно, но я должен спросить, имеет ли смысл добавлять callback здесь?

Спасибо

1 Ответ

1 голос
/ 08 августа 2011

Попробуйте добавить таймауты в ваши части кода, чтобы увидеть индикатор загрузки.Это происходит потому, что выполнение JavaScript выполняется быстрее, чем рендеринг dom, поэтому прежде чем мы увидим, что выполнение завершено, а метод hide скрывает индикатор загрузки

Попробуйте выполнить следующее: 

(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);

};
...