已知有流程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 流程控制器的更多相关文章

  1. 第一百零一节,JavaScript流程控制语句

    JavaScript流程控制语句 学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.br ...

  2. Javascript流程控制

    Javascript流程控制 1.条件语句 (1)if(exp)执行一句代码 (2)if(exp){执行代码段;} (3)if(exp){exp为true执行代码段}else{exp为false执行的 ...

  3. JavaScript流程控制语句脑图

    JavaScript流程控制语句脑图 图片是从网上找来的,在这记录一下,以备后面需要的时候查找方便. JavaScript通过规定的语句让有条件的按照一定的方式执行. 分为:循环语句 while do ...

  4. JavaScript 流程控制-分支

    JavaScript 流程控制-分支 1.流程控制 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能. 简单理解:流程控 ...

  5. Javascript 流程控制

    流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成.在正常情况下,程序中 的语句时按照书写顺序执行的,这种结构称为顺序结构.除了顺序结构之外还有选择结构和循环结构. 1.选择 ...

  6. JavaScript流程控制及函数

    1 流程控制 1.1 条件语句 分支结构 单向分支 if (条件表达式) { code...} 双向分支 if (条件表达式){    } else {    } <!DOCTYPE html& ...

  7. javaScript流程控制与函数

    流程控制 1.1 条件语句 分支结构 单向分支 if (条件表达式) { code... } <!DOCTYPE html> <html> <head> <m ...

  8. javascript 流程控制及函数

    回顾 基本语法 在html的使用 <script></script> 注释 ///* */ 指令结束符 ;换行 输出 console.log()document.write() ...

  9. JavaScript流程控制语句

    一.JavaScript分支语句 -alert()    弹出警告对话框 -prompt() 弹出输入框 1.if(){}else{} 栗子: var num=prompt("请输入电话号码 ...

随机推荐

  1. 原型工具Axure vs Mockplus ——表格对比 , 你选谁?

    现如今原型设计能力是越来越多的UI/UX.产品经理.提案者和互联网创业者必不可少的技能之一,所以在这里着重向大家介绍这两款非常棒的原型设计工具在表格功能上到底有哪些不同. Axure大家比较熟悉,Mo ...

  2. 一个java多线程面试题

    线程a 打印 数字 0--12: 线程b 打印 字母 a--z; 打印结果:0ab1cd2ef3gh4ij5kl6mn7op8qr9st10uv11wx12yz 要求用到 线程间传值: 分析:线程a打 ...

  3. Hadoop分布式模式下SSH免密码登录

    1.Hadoop中为什么要配置免密码登录 最近在学习Hadoop,在集群中,Hadoop控制脚本依赖SSH来执行针对整个集群的操作.例如,某个脚本能够终止并重启集群中的所有守护进程.所以,需要安装SS ...

  4. 【Android开发精要笔记】Android的Intent机制

    Android的Intent机制 Intent对象的作用和构成 android意图机制最核心的设计思想,就是引入了组件管理服务作为连接组件的管理者. 该服务的作用: 通过组件的配置信息了解系统中每个组 ...

  5. [Lua快速了解一下]Lua的model

    我们可以直接使用require(“model_name”)来载入别的lua文件,文件的后缀是.lua.载入的时候就直接执行那个文件了.比如: 我们有一个hello.lua的文件: print(&quo ...

  6. 修复DBGrideh使用TMemTableEh在Footers求平均值为0的Bug

    在一个项目中,使用DBGrideh,当使用自带的内存数据集时,对于Footers添加的求平均值,一直显示为0,其他汇总数据都是可以的,而切换使用TClientDataSet或者TADODataSet, ...

  7. Retrofit+Rxjava observable转javabean失败

    报错提示: Caused by: java.lang.IllegalArgumentException: Unable to create call adapter for io.reactivex. ...

  8. .net Tuple特性

    .net 4.0 引入了 Tuple特性: 在C# 4.0之前我们函数有多个返回值,通常是使用ref,out .到了c# 4.0 应当使用元组Tuple而不是使用输出参数,在任何时候都应避免使用ref ...

  9. duilib入门简明教程 -- 界面设计器 DuiDesigner (10)

       上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的话,非常的不直观,也很不方便.     所以这一章准备介绍duilib的UI设计器,由于这个设计器很不 ...

  10. element-ui学习

    1. 小技巧 使用导航路由 配置el-menu-item的index属性,如照片 也可使用数据动态配置导航菜单:参考 走马灯高度自适应 动态设置Carousel的height参数