Defer JS function call until the browser has a chance to breathe (https://github.com/TehShrike/idle-until-urgent)
function idleExec(fn, affectsDOM, timeoutFallbackMs = 500) {
const root = (typeof window != 'undefined' ? window : global)
let cancel
let result
const thunk = () => { cancel = null; result = fn(); }
if (affectsDOM && ('requestAnimationFrame' in root)) {
const handleId = requestAnimationFrame(() => requestAnimationFrame(thunk))
cancel = () => cancelAnimationFrame(handleId)
} else if ('requestIdleCallback' in root) {
const handleId = requestIdleCallback(thunk)
cancel = () => cancelIdleCallback(handleId)
} else {
const handleId = setTimeout(thunk, timeoutFallbackMs)
cancel = () => clearTimeout(handleId)
}
return () => {
if (cancel !== null) {
cancel()
result = fn()
}
return result
}
}
/*
var getFormatter = idleExec(() =>
new Intl.DateTimeFormat('en-US', {
timeZone: 'America/Los_Angeles',
}))
// later in your code, presumably not during the first tick...
var delay = ms => new Promise(res => setTimeout(res, ms))
await delay(1000)
getFormatter().format(new Date(1537452915210)) // => '9/20/2018'
*/