标签：directly oba play ring com The show ESS set
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
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>
效果
显示从左到右每个一秒显示一个方块字。
标签：directly oba play ring com The show ESS set
原文地址：https://www.cnblogs.com/lightsong/p/11037493.html
