async异步流程控制神器

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>

效果