async - 异步流程控制神器 - help animating webpage

async

https://www.npmjs.com/package/async

Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript. Although originally designed for use with Node.js and installable via npm install async, it can also be used directly in the browser. A ESM version is included in the main async package that should automatically be used with compatible bundlers such as Webpack and Rollup.

A pure ESM version of Async is available as async-es.

For Documentation, visit https://caolan.github.io/async/

For Async v1.5.x documentation, go HERE

 

API

https://github.com/caolan/async/blob/v1.5.2/README.md#waterfall

Control Flow

• series
• parallel, parallelLimit
• whilst, doWhilst
• until, doUntil
• during, doDuring
• forever
• waterfall
• compose
• seq
• applyEach, applyEachSeries
• queue, priorityQueue
• cargo
• auto
• retry
• iterator
• times, timesSeries, timesLimit

 

动画

https://github.com/fanqingsong/async_animation

index.js

import './css/style.css';
import './sass/index.scss';

var async = require("async");

window.onload = () => {
    let salutions = document.querySelectorAll("#salutions>div");
    for(let one of salutions){
        one.style.display = "none";
    }

    async.waterfall([
        function(callback) {
            salutions[0].style.display = "flex";

            setTimeout(callback, 1000);
        },
        function(callback) {
            salutions[1].style.display = "flex";

            setTimeout(callback, 1000);
        },
        function(callback) {
            salutions[2].style.display = "flex";

            setTimeout(callback, 1000);
        },
        function(callback) {
            salutions[3].style.display = "flex";

            setTimeout(callback, 1000);
        },
        function(callback) {
            callback(null);
        }
    ], function (err, result) {
        // result now equals 'done'
    });
};

 

html

    <div class="c-Sticky">
        <div class="c-Sticky-bd">
            <h1 style="text-align: center;">Async Show</h1>

            <div id="salutions" style="font-size: xx-large; color:blue;  display: flex; justify-content:center;">
                <div style="display:flex;width:200px;height:200px; justify-content:center;align-items: center ; margin: 5px; background-color: steelblue">你</div>
                <div style="display:flex;width:200px;height:200px; justify-content:center;align-items: center ; margin: 5px; background-color: antiquewhite">好</div>
                <div style="display:flex;width:200px;height:200px; justify-content:center;align-items: center ; margin: 5px; background-color: azure">中</div>
                <div style="display:flex;width:200px;height:200px; justify-content:center;align-items: center ; margin: 5px; background-color: beige">国</div>
            </div>

        </div>
    </div>

 

效果

 显示从左到右每个一秒显示一个方块字。