xpromisequeue
Version:
这是一个Javascript Promise的执行队列模块，里面的每一个Promise都是按顺序执行的，您也可以指定一定的优先级来决定队列的执行顺序。
335 lines (297 loc) • 12.8 kB
HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link href="./artDialog/skins/blue.css" rel="stylesheet" />
<script src="./artDialog/artDialog.js"></script>
<script src="https://cdn.bootcss.com/require.js/2.3.4/require.min.js"></script>
</head>
<body>
<fieldset>
<legend>
<strong>Log information:</strong>
</legend>
<div id="divLog"></div>
</fieldset>
<br />
<br />
<fieldset>
<legend>
<strong>Queue information:</strong>
</legend>
<div id="divQueue"></div>
</fieldset>
<br />
<br />
<fieldset>
<legend>
<strong>Action:</strong>
</legend>
<div>
<p style="color:#f00;font-weight:bolder;">
注：初始队列中已包含两个默认的执行项：【弹窗A】和【弹窗B】
</p>
<button id="btnRun" style="color:#f00;">运行队列</button>
<button id="btnAdd">追加一项任务至目前队列中</button>
<button id="btnAddFirst">追加一项高优先级的任务至目前队列中</button>
<button id="btnDestroy">销毁正在执行的队列项</button>
<button id="btnDestroyAll">销毁整个队列</button>
<br />
<br />
<button id="btnRegUnique">用新的队列项覆盖现有队列，并锁定此队列</button>
<button id="btnComplete">检查队列是否已执行完</button>
<button id="btnGetCurPromise">设置一个表示当前时刻整个队列执行结束后的回调</button>
<br />
<br />
<button id="btnAddBefore">在当前正在执行中的队列项之前加上新的队列项</button>
<button id="btnAddAfter">在当前正在执行中的队列项之后加上新的队列项</button>
<button id="btnAddToB">在默认弹窗【B】的前后都添加一个新的队列项</button>
</div>
</fieldset>
<script type="text/javascript">
require(['./../build/xPromiseQueue'], (xPromiseQueue) => {
let dialogBId = "dialogB";
let { QItem, Queue, Priority } = xPromiseQueue;
let test = new Queue();
let obj = null;
let divLog = document.getElementById('divLog');
let log = function (str) {
if (str) {
divLog.innerHTML += `<p>${str}</p>`;
} else {
divLog.innerHTML += `<p>${this.name}已处理完毕</p>`;
}
};
let showQueueLog = function () {
document.getElementById('divQueue').innerHTML = JSON.stringify(test);
};
obj = new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是【A】哦，快点下面的按钮<br />注：如果<strong>取消本弹窗</strong>，则不再往后执行其它队列项！',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.reject();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
});
obj.name = "弹窗A";
test.reg(obj);
obj = new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是【B】，你点了吗？',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
});
obj.name = "弹窗B";
obj.id = dialogBId;
test.reg(obj);
document.addEventListener('click', () => {
showQueueLog();
});
showQueueLog();
document.getElementById('btnRun').addEventListener('click', () => {
if (test.isWatching()) {
log('队列已在运行中，目前正在监听队列状态...');
}
test.run();
});
document.getElementById('btnAdd').addEventListener('click', () => {
obj = new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是新加的【C】，点一下吧？',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
});
obj.name = '弹窗C';
test.reg(obj);
});
document.getElementById('btnAddFirst').addEventListener('click', () => {
obj = new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是一个新加的<span style="color:#f00;">高优先级</span>的弹窗【D】，点一下吧？',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
});
obj.name = '高优先级的弹窗D';
test.reg(obj, Priority.High);
});
document.getElementById('btnDestroy').addEventListener('click', () => {
let cur = test.getCur();
if (null == cur) {
log('当前没有正在执行的队列项！');
return;
}
test.destroy(cur);
});
document.getElementById('btnDestroyAll').addEventListener('click', () => {
test.clear();
log('已销毁整个队列！');
});
document.getElementById('btnRegUnique').addEventListener('click', () => {
obj = new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是一个覆盖现有弹窗的超级弹窗【E】，点一下吧？',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
});
obj.name = '超级弹窗E';
test.regUnique(obj);
log('已覆盖整个队列！');
});
document.getElementById('btnComplete').addEventListener('click', () => {
let m = test.isComplete();
if (m) {
log('已执行完！');
} else {
log('未执行完！');
}
});
document.getElementById('btnGetCurPromise').addEventListener('click', () => {
test.getCurPms().then(() => {
alert('这是当前时刻整个队列执行结束后的回调！');
});
});
document.getElementById("btnAddBefore").addEventListener("click", () => {
test.regBefore(test.getCur(), new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是在当前项之前插队的新弹窗【F】！',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
this.name = "弹窗F";
}));
});
document.getElementById("btnAddAfter").addEventListener("click", () => {
test.regAfter(test.getCur(), new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是在当前项之后插队的新弹窗【G】！',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
this.name = "弹窗G";
}));
});
document.getElementById("btnAddToB").addEventListener("click", () => {
let dialogBQItemObj = test.getQItemById(dialogBId);
test.regAfter(dialogBQItemObj, new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是在默认弹窗【B】之后插队的新弹窗【H】！',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
this.name = "弹窗H";
})).regBefore(dialogBQItemObj, new QItem(function () {
let _this = this;
let dg = art.dialog({
content: '我是在默认弹窗【B】之前插队的新弹窗【I】！',
ok: function () {
_this.resolve();
log.call(_this);
},
cancel: function () {
_this.resolve();
log.call(_this);
}
});
this.destroyCallback = () => {
dg.close();
log('已成功销毁该队列项！');
};
this.name = "弹窗I";
}));
});
});
</script>
</body>
</html>