Как ловить promise.state() === 'pending' в $.Deferred() для отображения анимации загрузки?

Question

[faragly]

Здравствуйте! Изучаю deferred объекты в jquery и возникли некоторые вопросы.

jQuery(document).ready(function($) {
  var app = new App({delay: 3000}),
    promises = [];

  promises.push(app.read());
  $(document).on('click', '#create', function(e) {
    promises.push(app.create(e));
  });
  $(document).on('click', 'button[name=remove]', function(e){
    promises.push(app.remove(e));
  });

  $.when.apply($, promises).then(function() {
    return console.log('Promises Ary is Done');
  });
});

app.read()/.create()/.remove() возвращают d.promise()

App.prototype.create = function(e) {
  var d = $.Deferred();
  setTimeout(function() {
    // тут код
    d.resolve();
  }, this.options.delay);
  return d.promise();
};

Вопрос такой - как отловить состояние pending чтобы отобразить какой то див с анимацией (аналог watch из ангуляра). Нужно чтобы при вызове функции появилась анимация, в конце исчезла.

Answer 1

[Алексей Уколов]

Можно использовать notify.
Но вообще, отображанием таких вещей должен рулить контроллер - при старте отображать одно view, а в done - другое.

Comments

[faragly]

Как сделать чтобы when реагировал и на динамически добавляемые промисы? В моем примере по событию click происходит удаление, создание элемента, эти функции также возвращают промис, но when уже не реагирует

[Алексей Уколов]

faragly: никак, вы намешали синхронный и асинхронный код. Промисы сами по себе вашу задачу не решат, вам сначала нужно понять что вы хотите сделать.

[faragly]

Алексей Уколов: вы правы, я по незнанию нахерачил говнокод...

[Алексей Уколов]

faragly: попробуйте абстрагироваться от конкретной реализации jQ и продумать решение в терминах абстрактных промисов в вакууме - "когда я делаю то, должен возвращаться промис и при его выполнении должно происходить это".
Возможно, промисы - это вообще не тот инструмент, которым нужно решать вашу задачу, может, нужна шина событий или еще что-то. Из вопроса неясно, что происходит, поэтому точно сказать ничего нельзя.

[faragly]

Алексей Уколов: похоже я неправильно понял задачу и писал не тот код и не туда...

$(document).on('click', '#create', function(e) {
    $.when(app.create(e)).done(function(data){
      new jBox('Notice', $.extend(noticeOptions, {title: data.title, content: data.content}));
      app.add(data.id, data.fields);
    });
  });

Стояла задача применить в CRUD приложении промисы, вот я и думал куда их применить, но только сейчас понял) Спасибо за наставления!

[Алексей Уколов]

faragly: ну вот, это больше похоже на что-то близкое к реальности :)