Revision 595513 of L10n.ready

<p>{{ non-standard_header() }}</p>
<p><strong>Note</strong>: The behavior described below will be implemented in {{ bug(993188) }}.</p>
<div class="summary">
 <p><span class="seoSummary">The <code>ready</code> method is used to register a callback that will execute <strong>at least once</strong>.&nbsp; The callback is registered as a listener to the <code>ready</code> event of the <a href="/en-US/docs/Web/API/L10n">L10n</a> context.&nbsp; Additionally, if the <a href="/en-US/docs/Web/API/L10n">L10n</a> context is ready when <code>L10n.ready()</code> is called, the callback will be invoked immediately on the next tick of the event loop.</span></p>
</div>
<p>Using <code>L10n.ready()</code> is safer than registering a listener of the <a href="/en-US/docs/Web/API/Window">window</a>'s <code>localized</code> event because it also works when the <code>localized</code> event has already fired. This helps prevent intermittent race conditions, which would be hard to debug.</p>
<p><code>L10n.ready()</code> is useful for executing code every time the language changes and/or when the <a href="/en-US/docs/Web/API/L10n">L10n</a> context first becomes ready (the 0th language change).</p>
<p>In order to schedule initialization tasks for when the localization is ready to be used for the first time (and this time only), use <a href="/en-US/docs/Web/API/L10n.once"><code>L10n.once()</code></a>.</p>
<h2 id="Syntax">Syntax</h2>
<pre>
navigator.mozL10n.ready(callback);</pre>
<h3 id="Parameters">Parameters</h3>
<dl>
 <dt>
  <code>callback</code></dt>
 <dd>
  The function to be executed everytime the <a href="/en-US/docs/Web/API/L10n">L10n</a> context is or becomes ready.</dd>
</dl>
<h2 id="Example">Example</h2>
<pre class="brush: js">
navigator.mozL10n.ready(function showLanguageDescription() {
  var lang = navigator.mozL10n.language.code

&nbsp; // display the current locale in the main panel
  Settings.getSupportedLanguages(function displayLang(languages) {
    document.getElementById('language-desc').textContent = languages[lang];&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; │
&nbsp; }); 
});
</pre>
<h2 id="Specification" name="Specification">Specification</h2>
<p>Not part of any specification.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{domxref("L10n")}}</li>
 <li>{{domxref("L10n.once")}}</li>
</ul>
<section id="Quick_Links">
 <ol>
  <li data-closed="" data-default-state="open"><strong><a href="#">Guides</a></strong>
   <ol>
    <li><a href="/en-US/Apps/Build/Localization">Localization</a></li>
   </ol>
  </li>
  <li data-closed="" data-default-state="open"><strong><a href="#">Properties</a></strong>
   <ol>
    <li>{{ domxref("L10n.language.code") }}</li>
    <li>{{ domxref("L10n.language.direction") }}</li>
    <li>{{ domxref("L10n.readyState") }}</li>
   </ol>
  </li>
  <li data-closed="" data-default-state="open"><strong><a href="#">Methods</a></strong>
   <ol>
    <li>{{ domxref("L10n.get") }}</li>
    <li>{{ domxref("L10n.ready") }}</li>
    <li>{{ domxref("L10n.once") }}</li>
   </ol>
  </li>
 </ol>
</section>