Need help with requestIdleCallback?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

aFarkas
149 Stars 23 Forks 24 Commits 3 Opened issues

Description

A requestIdleCallback shim/polyfill

Services available

!
?

Need anything else?

Contributors list

# 344,596
Perl
Shell
CSS
assert
4 commits
# 22,491
clean-c...
mouse-e...
phantom...
nextjs
1 commit
# 56,851
centos
Ubuntu
HTML
virtual...
1 commit
# 7,028
Markdow...
uber
React
Rust
1 commit

requestIdleCallback
polyfill/shim Build Status

This is a polyfill/shim for the

requestIdleCallback
and
cancelIdleCallback
API. Also fixes early API implementation.

For more information see the Cooperative Scheduling of Background Tasks Draft.

Installation

Include the "index.js" in your website and use

requestIdleCallback
and
cancelIdleCallback
according to the specification.

How it works

requestIdleCallback
can't be really polyfilled. Therefore
requestIdleCallback
basically includes a throttle like function, that uses some heuristics to detect a) long running frames and b) user input as also DOM mutations to adapt accordingly.
requestIdleCallback
also tries to get the time right after a frame commit. The
deadline.timeRemaining()
either starts with 7ms or with 22ms for the first scheduled callback.

If multiple functions are scheduled with the

requestIdleCallback
shim for the same idle time, the shim makes sure to split those functions as soon as
timeRemaining()
is exceeded.

Usage

If you have a fast or a non-splittable task:

requestIdleCallback(function(){
    //your task
});

In case you have a heavy and splittable task you can use efficient script yielding technique:

requestIdleCallback(function(deadline){
    while(tasks.length && deadline.timeRemaining() > 0){
        tasks.shift()();
    }

if(tasks.length){
    requestIdleCallback(runTasks);
}

});

Reading vs writing layout:

requestIdleCallback
is mainly for layout neutral or layout reading/measuring tasks. In case you want to write layout/manipulate the DOM consider using
requestAnimationFrame
instead.

Of course

requestIdleCallback
can also be combined with
requestAnimationFrame
:
requstIdleCallback(function(){
    var width = element.offsetWidth;

requestAnimationFrame(function(){
    element.classList[width > 600 ? 'add' : 'remove']('is-large');
});

});

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.