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流程控制语句
JavaScript流程控制语句 学习要点: 1.语句的定义 2.if 语句 3.switch语句 4.do...while语句 5.while语句 6.for语句 7.for...in语句 8.br ...
- Javascript流程控制
Javascript流程控制 1.条件语句 (1)if(exp)执行一句代码 (2)if(exp){执行代码段;} (3)if(exp){exp为true执行代码段}else{exp为false执行的 ...
- JavaScript流程控制语句脑图
JavaScript流程控制语句脑图 图片是从网上找来的,在这记录一下,以备后面需要的时候查找方便. JavaScript通过规定的语句让有条件的按照一定的方式执行. 分为:循环语句 while do ...
- JavaScript 流程控制-分支
JavaScript 流程控制-分支 1.流程控制 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能. 简单理解:流程控 ...
- Javascript 流程控制
流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成.在正常情况下,程序中 的语句时按照书写顺序执行的,这种结构称为顺序结构.除了顺序结构之外还有选择结构和循环结构. 1.选择 ...
- JavaScript流程控制及函数
1 流程控制 1.1 条件语句 分支结构 单向分支 if (条件表达式) { code...} 双向分支 if (条件表达式){ } else { } <!DOCTYPE html& ...
- javaScript流程控制与函数
流程控制 1.1 条件语句 分支结构 单向分支 if (条件表达式) { code... } <!DOCTYPE html> <html> <head> <m ...
- javascript 流程控制及函数
回顾 基本语法 在html的使用 <script></script> 注释 ///* */ 指令结束符 ;换行 输出 console.log()document.write() ...
- JavaScript流程控制语句
一.JavaScript分支语句 -alert() 弹出警告对话框 -prompt() 弹出输入框 1.if(){}else{} 栗子: var num=prompt("请输入电话号码 ...
随机推荐
- [JSON] Validating/Asserting JSON response with Jsonlurper
import groovy.json.JsonSlurper def response = messageExchange.response.responseContent log.info &quo ...
- excel判断新增使用字典作为页面级数据库,减少io
前提:该机构录入的都是和该机构有关的数据,机构下的funmental(idcard唯一)和creditinfo(funmentalid唯一)不能重复所以推出以下结论:1.根据userid(机构)=&g ...
- Go 面向对象概念
前言: 本文是学习<<go语言程序设计>> -- 清华大学出版社(王鹏 编著) 的2014年1月第一版 做的一些笔记 , 如有侵权, 请告知笔者, 将在24小时内删除, 转载请 ...
- 两个SSH2间免密码登录
SSH2免密码登录OpenSSHhttp://blog.csdn.net/aquester/article/details/23836299 OpenSSH免密码登录SSH2http://blog.c ...
- 移动开发iOS&Android对比学习--异步处理
在移动开发里很多时候需要用到异步处理.Android的主线程如果等待超过一定时间的时候直接出现ANR(对不熟悉Android的朋友这里需要解释一下什么叫ANR.ANR就是Application Not ...
- 敏捷软件开发:原则、模式与实践——第11章 DIP:依赖倒置原则
第11章 DIP:依赖倒置原则 DIP:依赖倒置原则: a.高层模块不应该依赖于低层模块.二者都应该依赖于抽象. b.抽象不应该依赖于细节.细节应该依赖于抽象. 11.1 层次化 下图展示了一个简单的 ...
- JW Player开始播放和结束播放事件的捕获
项目中使用到jwPlayer,需要在用户开始播放盒结束播放的时候触发一些事件,所以研究JWPlayer. <script type="text/javascript"> ...
- pig配置
下载Apache Pig 首先,从以下网站下载最新版本的Apache Pig:https://pig.apache.org/ 步骤1 打开Apache Pig网站的主页.在News部分下,点击链接re ...
- Java == 和 equals 比较
在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String(&qu ...
- java-设计模式汇总整理
最近,对各种模式做了一个整理,便于后续自用. 1.工厂模式 总结:很好理解,一个接口,2个类实现这个接口,那么可以用“接口 变量=new 接口实现类”的方式调用不同的实现类,调用方式直接使用接口的方法 ...