github: async-loop-timer

npm: async-loop-timer

使用

1. npm

   npm i async-loop-timer

2. github

   下载该项目，将lib中的代码复制到你的项目中。 ~~引用index.js即可~~

   可以通过不同的方式引入不同输出文件.

   1. index.js -> umd 通用方式
   2. index.es.js -> es (export/import)
   3. index.cjs.js -> commonjs
   4. index.amd.js -> amd

3. script 引入

   1. script标签链入src中的AsyncLoop.js 即可。
   2. 或者引入index.js。用例：

    <script>
        const AsyncLoop = window.asynclooptimer //绑定在全局synclooptimer变量了。 其余操作和用法请看下面接口说明。
        let myInterval = new AsyncLoop();
   
        function timeoutFn(){
            // 模拟异步函数
            setTimeout(function(){
   
                console.log('2000ms异步函数');            
   
                // 异步回调...
   
                myInterval.request(); //需要在循环函数尾部调起下次循环
   
            }, 2000)
   
        }
   
        myInterval.init(() => {
   
            timeoutFn();
   
        }, 5000, 'diff');
   
        myInterval.start();
    </script>

说明

1. github中 index.html 中即为使用用例。推荐测试

2. 代码中也有详细注释。

3. 可进行二次加工修改以符合个人使用。

4. sum && diff 周期时序图

   1. sum模式周期时序图 500ms为例

   rfn########---------------rfn##---------------rfn########################---------------rfn####
   -----------500ms##########-----500ms##########---------------------------500ms##########

   2. diff模式周期时序图 500ms为例

   rfn########----rfn############rfn########################rfn####--------rfn######------rfn####
   500ms##########500ms##########500ms##########------------500ms##########500ms##########

语法（模块化引入）

let myInterval = new AsyncLoop()

Api

1. init

init 初始化 loopFn， cycleTime， mode(可选)

可通过 init 重新初始化实例内容

语法：

myInterval.init(loopFn, cycleTime [, mode])

使用方法一

function timeoutFn() {
            // 模拟异步函数
            setTimeout(function(){

                // 异步回调...

                myInterval.request(); //需要在循环函数尾部调起下次循环

            }, 2000)

        }

myInterval.init(() => {

            timeoutFn();

        }, 5000, 'diff');

使用方法二

function timeoutFn() {
            // 模拟异步函数
            return new Promise((resolve) => {
                setTimeout(function(){

                    // 异步回调...

                    resolve()

                }, 2000)
            })
        }

myInterval.init(async () => {

            await timeoutFn();

            myInterval.request();

        }, 5000, 'diff');

loopFn

你需要循环的异步函数

cycleTime

基本循环周期：sum模式下为loopFnTime + cycleTime, diff模式下为 max(loopFntime, cycleTime);

loopFnTime 为异步函数执行时间

mode (可选)

循环模式：分为sum和diff模式,默认为sum

1. sum模式周期时序图 500ms为例
    rfn########---------------rfn##---------------rfn########################---------------rfn####
    -----------500ms##########-----500ms##########---------------------------500ms##########

2. diff模式周期时序图 500ms为例
    rfn########----rfn############rfn########################rfn####--------rfn######------rfn####
    500ms##########500ms##########500ms##########------------500ms##########500ms##########

rfn######## 为异步函数执行；500ms########## 为基准周期；

2. request

主功能函数, 相当于调用一次循环;需要写在异步函数尾部,具体看init的使用方式。

语法：

myInterval.request([time])

使用

myInterval.request(0) 表示立即调用一次循环

time (可选)

会在time时间后调用异步函数，如缺省则使用初始化时的循环周期。

3. initJudge

initJudge 初始化前置条件函数，默认为null，当其返回结果为true时进入主函数，否则不执行loopFn直接进入下一次循环。

语法

myInterval.initJudge(JudgeFn);

使用

let list = [1, 2, 3];
myInterval.initJudge(function() {
            return list.length > 2;
        });

4. start

start 开始循环

使用

myInterval.start();

5. stop

stop 停止循环

使用

myInterval.stop();

6. restart

restart 重启循环。

使用

myInterval.restart();