requestidlecallback
DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/requestidlecallback package

0.3.0 • Public • Published

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:

requstIdleCallback(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');
    });
});

Readme

Keywords

none

Package Sidebar

Install

npm i requestidlecallback

Weekly Downloads

483,645

Version

0.3.0

License

MIT

Last publish

Collaborators

  • afarkas