zoukankan      html  css  js  c++  java
  • JavaScript 流程控制器

    已知有流程step1、step2、step3、step4、step5 , 如何控制输出下面过程

    例如:

    1:step1、step2、step3、step2、step3、step4、step5

    2:step1、step2、step4、step5

    3:step1、step2、step4、step5、step3、step4、step5

    /*
    * 流程控制器
    * 作者:caoke
    * */
    
    class Step{
        //初始化
        constructor(stepArr,callback){
    
            this.stepArr=stepArr;
            this.curIndex=0;
            this.isPaused=false;
            this.nextMode=null;
            this.curStep=this.stepArr[this.curIndex];
            this.hasRunTimes={};
            this.stepArr.forEach( (step)=> {
                this.hasRunTimes[step]=0;
            })
            this.callback=callback;
        }
        callback(){
            this.go()
        }
        // 运行当前流程
        run(){
            this.curStep=this.stepArr[this.curIndex]
            if(this.curStep){
                this.hasRunTimes[this.curStep]++
                this.callback&&this.callback.apply(this,[this.curStep,this.hasRunTimes[this.curStep]])
            }
        }
        // 跳转到某个流程
        go(step){
            this.clear()
            if(step){
                this.curIndex=this.stepArr.indexOf(step)
            }else{
                this.curIndex++
            }
            this.run()
        }
    
        // 进入下一个流程
        next(){
            if(this.nextMode){
                this.go(this.nextMode.nextStep)
            }else{
                this.go()
            }
        }
    
        // 自动进入下一步
        waitSecondAndGo(second,step){
            if(!this.isPaused){
               this.stopTimer()
            }
            const mode={
                startTime:new Date().getTime(),
                allSecond:second,
                leftSecond:second*1000,
                nextStep:step,
                timer:null,
            }
    
            //获得下一步
            if(this.nextMode==null||mode.leftSecond<this.nextMode.leftSecond){
                this.nextMode=mode;
            }
    
            if(!this.isPaused){
                this.startTimer()
            }
    
        }
        // 暂停
        pause(){
            if(!this.isPaused){
                this.isPaused=true;
                this.stopTimer()
    
            }
    
        }
        // 继续
        repause(){
            if(this.isPaused){
                this.isPaused=false;
                this.startTimer()
            }
    
        }
        stopTimer(){
            if(this.nextMode&&this.nextMode.timer){
                const duration=new Date().getTime()-this.nextMode.startTime;
                this.nextMode.leftSecond=this.nextMode.leftSecond-duration;
    
                clearTimeout(this.nextMode.timer);
                this.nextMode.timer=null;
            }
        }
        startTimer(){
            if(this.nextMode&&this.nextMode.timer==null){
                this.nextMode.startTime=new Date().getTime();
                this.nextMode.timer=setTimeout(() => {
                    this.go(this.nextMode.nextStep)
                },this.nextMode.leftSecond)
            }
        }
        // 销毁
        clear(){
            if(this.nextMode){
                if(this.nextMode.timer){
                    clearTimeout(this.nextMode.timer);
                    this.nextMode.timer=null
                }
                this.nextMode=null
            }
        }
    }
    export default Step;
    

      

      

      

      

      

      

  • 相关阅读:
    Javascript基础与面向对象基础~第四讲 Javascript中的类对象
    转:正确区分不同的查找算法count,find,binary_search,lower_bound,upper_bound,equal_range
    原码,补码,反码相互转化
    c++模板类/模板函数的声明与定义应该放在头文件里
    低调做人,高调做事
    汇编 一道小题
    保罗·格雷厄姆(Paul Graham
    Microsoft Word已停止工作的解决办法
    转:中国互联网十五年的22个创新模式
    转:二进制、八进制、十进制、十六进制之间转换
  • 原文地址:https://www.cnblogs.com/caoke/p/9892138.html
Copyright © 2011-2022 走看看