.promesa( [type ] [, target ] )Devoluciones: Promesa

Descripción: Devuelve un objeto Promise para observar cuándo han finalizado todas las acciones de un determinado tipo vinculadas a la colección, en cola o no.

  • versión agregada: 1,6.promesa( [type ] [, target ] )

    • escribe (defecto: fx) Tipo: Cadena El tipo de cola que debe observarse.
    • objetivo Tipo: PlainObject Objeto al que se deben adjuntar los métodos de promesa

los .promise() devuelve una Promesa generada dinámicamente que se resuelve una vez que todas las acciones de un cierto tipo vinculadas a la colección, en cola o no, han finalizado.

Por defecto, type es "fx", lo que significa que la Promesa devuelta se resuelve cuando se han completado todas las animaciones de los elementos seleccionados.

El contexto resuelto y el único argumento es la colección en la que .promise() ha sido llamado.

Si target está provisto, .promise() adjuntará los métodos y luego devolverá este objeto en lugar de crear uno nuevo. Esto puede resultar útil para adjuntar el comportamiento Promise a un objeto que ya existe.

Nota: La Promesa devuelta está vinculada a un objeto diferido almacenado en el .data() para un elemento. Desde el.remove() El método elimina los datos del elemento, así como el elemento en sí, evitará que se resuelva cualquiera de las Promesas no resueltas del elemento. Si es necesario eliminar un elemento del DOM antes de que se resuelva su Promesa, use .detach() en su lugar y seguir con .removeData() después de la resolución.

Ejemplos:

Utilizando .promise() en una colección sin animación activa devuelve una Promesa resuelta:

var div = $( "<div>" );
 
div.promise().done(function( arg1 ) {
  // Will fire right away and alert "true"
  alert( this === div && arg1 === div );
});

Resuelva la Promesa devuelta cuando todas las animaciones hayan finalizado (incluidas las iniciadas en la devolución de llamada de animación o agregadas más adelante):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>promise demo</title>
  <style>
  div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).append( "Started..." );
 
  $( "div" ).each(function( i ) {
    $( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
  });
 
  $( "div" ).promise().done(function() {
    $( "p" ).append( " Finished! " );
  });
});
</script>
 
</body>
</html>

Manifestación:

Resuelva la Promesa devuelta usando un $.when() declaración (la .promise() permite hacer esto con las colecciones de jQuery):

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>promise demo</title>
  <style>
  div {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
    display: none;
    background-color: #090;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
var effect = function() {
  return $( "div" ).fadeIn( 800 ).delay( 1200 ).fadeOut();
};
 
$( "button" ).on( "click", function() {
  $( "p" ).append( " Started... " );
 
  $.when( effect() ).done(function() {
    $( "p" ).append( " Finished! " );
  });
});
</script>
 
</body>
</html>

Manifestación: