Обсуждение:Наблюдение за очередью событий

Материал из JQuery

Перейти к: навигация, поиск
.promise()

Возвращает promise-объект, следящий за выполнением очереди событий (например анимаций) на выбранных элементах. Этот объект принимает состояние "выполнено", как только все очереди событий на выбранных элементах будут завершены. Если в момент вызова promise() на выбранных элементах не будет запущено ни одной очереди, то возвращенный promise-объект сразу же окажется в состоянии "выполнено". Замечание: данный метод, относится к методам объекта jQuery, а не deferred. У последнего есть метод с таким же названием, однако его назначение немного отличается.

.promise([type], [target]):promise1.6

Возвращает promise-объект, следящий за выполнением очередей событий, которые были активны в момент вызова этого метода.

type — имя очереди, за которой будет наблюдать promise-объект. По умолчанию, это стандартная очередь "fx".
target — вместо создания нового объекта заместителя, можно наделить любой существующий объект всеми его свойствами и методами. Для этого нужно указать этот объект в параметре target. В результате, promise() вернет указанный объект, который будет обладать как первоначальными методами и полями, так и методами и полями заместителя.

Примеры использования:

$(".box").promise() возвратит promise-объект, который будет следить за выполнением очередей событий, на элементах с классом box.
$(".box").promise("nf") возвратит заместителя, который будет следить за выполнением очередей событий с именем "nf", на элементах с классом box.

Когда наблюдающий за очередями объект promise будет выполнен, все обработчики этого события получат в качестве единственного параметра объект jQuery, на котором изначально был вызван promise().

Содержание

В действии

Пример 1

В большинстве случаев, очередью событий является очередь анимаций. В данном примере проследим за сворачиванием элементов div. Когда они все окончательно исчезнут, на экран будет выведено сообщение.

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div{
      display: block;
      width: 50px;
      height: 50px;
      float: left;
      padding: 15px;
      margin: 5px;
      background-color: #EEEEEE;
      font-size: 20pt;
    }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~

  ~lt~div id="el-1"~gt~ 1 ~lt~/div~gt~
  ~lt~div id="el-2"~gt~ 2 ~lt~/div~gt~
  ~lt~div id="el-3"~gt~ 3 ~lt~/div~gt~
  ~lt~div id="el-4"~gt~ 4 ~lt~/div~gt~
  ~lt~button~gt~Убрать элементы~lt~/button~gt~
  ~lt~script~gt~
    function hideDivs()
    {
      $("#el-1").hide(1600);
      $("#el-2").slideUp(1200);
      $("#el-3").fadeOut(1400);
      $("#el-4").slideUp(1800);
      $("div").promise().done(function(){ // обработчик выполнения promise
        alert("Все элементы были убраны со страницы");
      });
    }

    // обработка нажатия на кнопку
    $("button").click(hideDivs);
  ~lt~/script~gt~

~lt~/body~gt~
~lt~/html~gt~

Пример 2

Наделим произвольный объект методами заместителя:

  var obj = {a:1, b:"text"};
  var promise = $("div").promise(obj);
  // Теперь переменные promise и obj будут содержать один объект, который
  // будет обладать полями и методами и объекта obj и заместителя def
 
  alert(promise.a); // выведет на экран "1"
  alert(obj.isResolved()); // выведет на экран false

Ссылки

Поисковые ключи:
  • обработка выполнения очереди событий
  • .promise
Личные инструменты