<label for="text">Type here:</label>
<textarea placeholder="Type here" id="text"></textarea>
<div>Characters remaining: <span id="remaining">280</span></div>
textarea {
  display: block;
  width: 300px;
  height: 100px;
}
import { request as rICPolyfill } from "https://cdn.skypack.dev/requestidlecallback@0.3.0";
const textarea = document.querySelector('#text')
const remaining = document.querySelector('#remaining')

const rIC = typeof requestIdleCallback === 'function' ? requestIdleCallback : rICPolyfill

function updateUI(text) {
  // Simulate an expensive UI, run some blocking work
  let start = Date.now()
  while (Date.now() - start < 70) {}
  remaining.textContent = 280 - text.length
}

let queued = false
textarea.addEventListener('input', () => {
  if (!queued) {
    queued = true
    rIC(() => {
      updateUI(textarea.value)
      queued = false
    })
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.