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 mainasyncpackage 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
动画
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>
效果
显示从左到右每个一秒显示一个方块字。