Never Punch Manticores

    @realdennis/next-frame
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    GitHub Actions NPM downloads

    nextFrame

    Some utils about promisify of window.requestAnimationFrame, you can use this in your async function to slice the long callback bottleneck to improve performance and avoid frame drop in your callback.

    Why use nextFrame instead of requestAnimationFrame?

    Since requestAnimationFrame is a callback usage, if we want to deal with complexity flow, the callback hell would be crap.

    Installation

    $ npm install @realdennis/next-frame

    Usage

    It expose three methods nextFrame / perFrameReduccer / perFrameMapper for difference purpose. It expose one factory function nextFrameFactory to generate the nextFrame and cancelNextFrame pair.

    // ESModule
    import {
      nextFrame,
      nextFrameFactory,
      perFrameReduccer,
      perFrameMapper
    } from "https://unpkg.com/@realdennis/next-frame/dist/index.mjs";

    nextFrame

    import { nextFrame } from '@realdennis/next-frame';
    
    window.onclick = async ()=>{
        await nextFrame()
        /**
         * ... something click callback step1
         */
        chunk1();
        await nextFrame()
        /**
         * ... something click callback step2
         */
        chunk2();
        await nextFrame()
        /**
         * ... something click callback step3
         */
        chunk3()
    }

    These 3 chunk will be execute in 3 serial different frame, and share the same closure variable, race-safe.

    nextFrameFactory

    Here is a factory to generate a cancelable nextFrame, by the pair of cancelNextFrame. They are paired, once you call cancelNextFrame, the nextFrame generated by the same factory call WILL NOT WORK ANYMORE.

    It will help us to cancel the task was scheduled to the long future.

    Both resolve and reject of the nextFrame promise will passing the currentFrame in, so you can know the task progress.

    const { nextFrame, cancelNextFrame } = nextFrameFactory();
    const aLargeTaskCallback = async ()=>{
        try{
            console.log(1); // Large Task 1
            var { currentFrame } = await nextFrame();
            console.log(2); // Large Task 2
            await nextFrame();
            // ...same
            console.log(33); // Large Task 33
            await nextFrame();
            console.log(34); // Large Task 34
        }catch(e){
            console.log("Get the cancel signal");
            console.log("current task progress...", e.currentFrame);
        }
    }
    
    // In other place, condition trigger
    useEffect(() => {
        aLargeTaskCallback()
        return () => cancelNextFrame();
    },[])
    // Some kind like this
    // component is unmounted, and we want to clear the task we schedule in the future

    perFrameReducer

    It provides perFrameReducer, an array reduce callback, reduce the callback array to promise, and schedule it all to different frame like above.

    import { perFrameReducer } from '@realdennis/next-frame';
    
    window.onclick = async ()=>{
        await [chunk1,chunk2,chunk3].reduce(perFrameReducer)
        console.log('Done')
    }

    perFrameMapper

    It provides perFrameMapper, an array map callback, map the callback array to promised callback array, and each promised callback has itself start frame.

    import { perFrameMapper } from '@realdennis/next-frame';
    
    window.onclick = async (){
        const scheduledChunks =  [chunk1,chunk2,chunk3].map(perFrameMapper);
        //[chunk1InFrame1func , chunk2InFrame2func, chunk3InFrame3func]
        Promise.all(scheduledChunks.map(cb=>cb()))
            .then(console.log('concurrent done'));
    }

    License

    LICENSE MIT © 2019 realdennis

    Keywords

    none

    Install

    npm i @realdennis/next-frame

    DownloadsWeekly Downloads

    13

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    6.94 kB

    Total Files

    5

    Last publish

    Collaborators

    • realdennis