blob: 043382a45d5a7b54e111e74ef78f53bd6e5cf490 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
title: WindowOrWorkerGlobalScope.queueMicrotask()
slug: Web/API/queueMicrotask
tags:
- API
- Asynchrone
- HTML DOM
- Intervales
- JavaScript
- Micro-tâche
- Microtask
- Minuteurs
- Méthode
- Performance
- ServiceWorker
- SharedWorker
- Tâches
- Window
- WindowOrWorkerGlobalScope
- Worker
- queueMicrotask
- setTimeout
translation_of: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask
---
<div>{{APIRef("HTML DOM")}}</div>
<p>La méthode <code><strong>queueMicrotask()</strong></code>, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur.</p>
<p>La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur.</p>
<p>Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">microtask guide</a>.</p>
<p>L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir <a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a> pour plus de détails.</p>
<p>Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu.</p>
<p><code>queueMicrotask()</code> est exposé dans la mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox"><em>scope</em>.queueMicrotask(<em>function</em>);
</pre>
<h3 id="Paramètres">Paramètres</h3>
<dl>
<dt><code>function</code></dt>
<dd>Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur.</dd>
</dl>
<h3 id="Valeur_de_retour">Valeur de retour</h3>
<p><code>undefined</code>.</p>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: js">self.queueMicrotask(() => {
// function contents here
})</pre>
<p>Tiré de la <a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing">spécification de queueMicrotask</a> :</p>
<pre class="brush: js">MyElement.prototype.loadData = function (url) {
if (this._cache[url]) {
queueMicrotask(() => {
this._setData(this._cache[url]);
this.dispatchEvent(new Event("load"));
});
} else {
fetch(url).then(res => res.arrayBuffer()).then(data => {
this._cache[url] = data;
this._setData(data);
this.dispatchEvent(new Event("load"));
});
}
};</pre>
<h2 id="Lorsque_queueMicrotask_nest_pas_disponible">Lorsque queueMicrotask() n'est pas disponible</h2>
<p>Le code ci-dessous est une prothèse d'émulation (<em>polyfill</em>) pour <code>queueMicrotask()</code>. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée.</p>
<pre class="brush: js">if (typeof window.queueMicrotask !== "function") {
window.queueMicrotask = function (callback) {
Promise.resolve()
.then(callback)
.catch(e => setTimeout(() => { throw e; }));
};
}
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th>Spécification</th>
<th>Statut</th>
<th>Commentaire</th>
</tr>
<tr>
<td>{{SpecName("HTML WHATWG", "timers-and-user-prompts.html#microtask-queuing", "self.queueMicrotask()")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Définition initiale</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.WindowOrWorkerGlobalScope.queueMicrotask")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide">Using microtasks in JavaScript with queueMicrotask()</a></li>
<li><a href="/en-US/docs/Learn/JavaScript/Asynchronous">Asynchronous JavaScript</a></li>
<li><a href="https://github.com/fergald/docs/blob/master/explainers/queueMicrotask.md">queueMicrotask explainer</a></li>
<li><a href="https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/">Tasks, microtasks, queues and schedules</a> by Jake Archibald</li>
</ul>
|
