Блог

Главная - Вопросы по программированию - Отложенные объекты jQuery

Отложенные объекты jQuery

#javascript #jquery #queue

#javascript #jquery #очередь

Вопрос:

Я работаю над «одностраничным приложением» и ищу способ убедиться, что рендеринг страницы завершен.

Мой поток приложений как таковой:

  1. Нарисуйте разметку навигации
  2. Добавьте наложение, указывающее, что содержимое страницы извлекается
  3. Фактически загружайте содержимое и вводите его в область содержимого страницы

Теперь это то, где я терплю неудачу:

После ввода содержимого страницы я инициализирую виджеты, зависящие от разметки (bootstrap, пользовательские события и т.д.).

Это означает, что содержимым страницы все еще можно манипулировать, поэтому мне было интересно, могу ли я использовать отложенный объект jQuery (и как) в качестве очереди функций с функциями, которые могут выполнять асинхронные операции, а также обычные старые синхронные функции.

Используя это, я хочу иметь возможность определить, когда все виджеты были инициализированы, а затем удалить индикатор загрузки страницы.

Комментарии:

1. Да, вы можете использовать promises, чтобы узнать, когда завершится выполнение нескольких асинхронных функций, но на что именно вы хотите, чтобы мы ответили, кода нет, просто довольно расплывчатый вопрос?

2. Какую обратную связь предоставляют виджеты? Они дают вам обещание, когда они завершат инициализацию?

3. Я обновил свой вопрос, я искал пример такого использования, может быть, даже хорошую статью для чтения, поскольку я не мог найти те, которые помогли мне понять концепцию.

4. @Bergi на данный момент нет, я понимаю, что рефакторинг кода в порядке, хотя

Ответ №1:

Вы могли бы использовать отложенный объект jQuery для создания очереди асинхронных функций.

Вот пример реализации (с помощью jsfiddle / coffeeandcode):

 var Queue = function() {
    var lastPromise = null;

    this.add = function(obj, method, args, context) {
        var methodDeferred = $.Deferred();
        var queueDeferred = this.setup();
        if(context === undefined) { context = obj; }

        // execute next queue method
        queueDeferred.done(function() {


            // call actual method and wrap output in deferred
            setTimeout(function() {
                obj[method].apply(context, args);
                methodDeferred.resolve();
            }, 100);


        });
        lastPromise = methodDeferred.promise();
    };

    this.setup = function() {
        var queueDeferred = $.Deferred();

        // when the previous method returns, resolve this one
        $.when(lastPromise).always(function() {
            queueDeferred.resolve();
        });

        return queueDeferred.promise();
    }
};

Вы можете увидеть код в действии здесь:

http://jsfiddle.net/coffeeandcode/yg9P6/