jQuery 3.3

.promise()




jquery

.Pomise ([نوع] [، الهدف]) إرجاع: Promise

الوصف: إرجاع كائن Promise لمراقبة عند الانتهاء من كافة الإجراءات من نوع معين منضم إلى المجموعة أو في قائمة الانتظار أو لا.

  • الإصدار المضاف: 1.6 proomise ([نوع] [، الهدف])

    • النوع (الافتراضي: fx )
      اكتب: String
      نوع قائمة الانتظار التي يجب مراعاتها.
    • استهداف
      اكتب: PlainObject
      الكائن الذي يجب إرفاق طرق الوعد به

ترجع .promise() إلى وعد تم إنشاؤه ديناميكيًا يتم حله بمجرد انتهاء جميع الإجراءات من نوع معين مرتبط بالتجميع أو في قائمة الانتظار أو لا.

بشكل افتراضي ، type "fx" ، مما يعني أنه يتم حل الوعد المرتجع عند اكتمال جميع الرسوم المتحركة للعناصر المحددة.

حل السياق والوسيطة الوحيدة هي المجموعة التي تم استدعاء .promise() .

إذا تم توفير target ، .promise() بإرفاق الطرق به ثم إرجاع هذا الكائن بدلاً من إنشاء كائن جديد. قد يكون ذلك مفيدًا في إرفاق سلوك Promation بكائن موجود بالفعل.

ملاحظة: يتم إرجاع "الوعد المرتجع" إلى كائن مؤجل مخزنة على .data() لعنصر. نظرًا لأن طريقة .remove() تزيل بيانات العنصر والعنصر نفسه ، فإنه سيمنع أي من الوعود التي لم يتم حلها للعنصر من الحل. إذا كان من الضروري إزالة عنصر من DOM قبل حل " .detach() ، استخدم .detach() بدلاً من ذلك ثم اتبع مع .removeData() بعد الدقة.

أمثلة:

يؤدي استخدام .promise() في مجموعة بدون حركة نشطة إلى إرجاع وعد تم حلها:

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

حل وعد المرتجعات عند انتهاء جميع الرسوم المتحركة (بما في ذلك تلك التي بدأت في رد الرسوم المتحركة أو إضافتها لاحقًا):

<!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-1.10.2.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>

عرض:

حل وعد المعادة باستخدام عبارة $.when() .promise() الأسلوب .promise() يجعل من الممكن القيام بذلك مع مجموعات 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-1.10.2.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>

عرض: