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

    Keywords

    none

    Install

    npm i requestidlecallback

    DownloadsWeekly Downloads

    141,696

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • afarkas