Skip to content
This repository has been archived by the owner on Dec 17, 2021. It is now read-only.

Latest commit

 

History

History
121 lines (89 loc) · 2.81 KB

textasync.md

File metadata and controls

121 lines (89 loc) · 2.81 KB

DOM/textAsync()

The suffix Async differentiates this method from its Sync counterpart - textSync(). Unlike the Sync counterpart, textAsync() is a promise-based function that runs in a different flow from that of the calling code. It follows a performance strategy that lets the browser engine decide the most convenient time to honour its call.

Import

import textAsync from '@web-native-js/play-ui/src/dom/textAsync.js';

Syntax

let promise = textAsync(el[, content = null);

> Set Text Content

let promise = textAsync(el, content);

Parameters

  • el - HTMLElement: The target DOM element.
  • content - String: The text content to set.

Return

  • Promise - A Promise that resolves when the operation finally gets executed. The target DOM element is returned when the promise resolves.

> Get Text Content

textAsync(el).then(content => {
    // Do something with content
});

Parameters

el - HTMLElement: The source DOM element.

Return

Promise - A Promise that resolves when the operation finally gets executed. The source element's text content is returned when the promise resolves.

Usage

<body>
  <div>DIV1</div>
</body>

// Set content
textAsync(document.body, 'Hello world!').then(body => {
    // Do something with body
});

// Get content
textAsync(document.body).then(content => {
    // Do something with content
});

Implementation Note

Technically, DOM operations initiated with textAsync() are internally batched to an appropriate queue using the Reflow utility. Read operations run first, then write operations. This works to eliminate layout thrashing as discussed in Reflow's documentation.

Notice the order of execution in the following example.

// Set content
textAsync(document.body, 'Hi').then(() => {
    console.log('Set operation 1');
});

// Get content
textAsync(document.body).then(content => {
    console.log('Get operation 1');
});

// Set content
textAsync(document.body, 'Hi again').then(() => {
    console.log('Set operation 2');
});

// Get content
textAsync(document.body).then(content => {
    console.log('Get operation 2');
});

// ------------
// console
// ------------
Get operation 1
Get operation 2
Set operation 1
Set operation 2

The proper way to synchronize with an async function is to move code into its then() block as seen below.

// Set content
textAsync(document.body, 'Hi').then(body => {
    console.log('Set operation 1');
    // Get content
    textAsync(body).then(content => {
        console.log('Get operation 1');
    });
});

// ------------
// console
// ------------
Set operation 1
Get operation 1