最近要做一个各种连续操作的功能，步骤比较多，想要看一下执行情况，另外顺便看看执行时间。
一开始是直接手撸的，但是代码多了就很难看，也不好维护。于是做了一个小功能。
记录格式
{
title: '好像没什么用的标题',
msg: `开始叙述`,
t1: window.performance.now(),
t2: '记录时间'.
item: ['做个子记录']
}
结构比较简单，主要是两个时间，一个是开始时间，一个是结束时间，然后就是叙述执行步骤。
然后就是建立数组存放，然后顺便写一个函数管理一下。
实现代码
/**
* 一个简单的记录执行过程和使用时间的 log
*/
class ShowLog {
constructor () {
this.info = reactive([])
}
newLog (title, count = 0) {
this.info.push({
title,
msg: `<br>开始添加【${title}】...`,
t1: window.performance.now(),
t2: 0,
item: []
})
if (count > 0) {
this.info[this.info.length - 1].msg = `<br>开始添加【${title}】，共${count}个...`
}
return this.info.length - 1
}
start (msg = null, index = this.info.length - 1) {
const _info = this.info[index]
_info.t1 = window.performance.now()
_info.msg += `<br> 开始添加【${msg}】...`
}
end (id, index = this.info.length - 1) {
const _info = this.info[index]
_info.t2 = window.performance.now()
_info.msg += `添加成功！ID：${id}。用时：${_info.t2 - _info.t1}<br>`
console.log(`===添加【${_info.title}】成功，表ID：${id}`)
}
clear () {
this.info.length = 0
}
}
比较简陋，想做一个子记录的，但是还没有想好。
好多功能都写死了，比如只是记录添加的情况，修改和删除都没关，先暂时这么用。
使用方法
// 进度提示信息
const myLog = new ShowLog()
myLog.newLog('表')
let res = await service(tableId, 10, moduleInfo.tableModal, -2, 'meta')
myLog.end(res.newId)
先做一个实例，然后new一条记录，其实就是加一个数组。
然后开始执行程序，等待结束后开始统计。
因为回调地狱实在太难了，所以用 await 的方式假装成顺序执行。
直到遇到了foreach，和想象的还是不一样。
cols.forEach(async (col, index) => {
col.tableId = intTableId
col.columnId = intTableId + (index + 1) * 10
col.canNull = 0
col.columnKind = index === 0 ? 11 : 14
myLog.start(col.colName, logIndex)
res = await service(columnId, 10, col, -2, 'meta')
myLog.end(res.newId, logIndex)
})
本来以为可以在foreach内部等待呢，结果还是先循环完了，然后再等待。
这样的话，要么试试for循环，要么试试子记录。明天再看吧。
执行情况
开始添加【表】...添加成功！ID：10。用时：36.06000001356006
开始添加【字段】，共4个... // 子记录没有对上。
开始添加【col_11】...
开始添加【col_21】...
开始添加【col_31】...
开始添加【col_41】...添加成功！ID：24。用时：137.21499999519438
添加成功！ID：25。用时：220.25499999243766
添加成功！ID：26。用时：254.8399999793619
添加成功！ID：27。用时：289.53999999770895
开始添加【模块菜单】...添加成功！ID：10。用时：165.26000000862405
开始添加【列表的分页】...添加成功！ID：10。用时：154.50999999325722
开始添加【列表的按钮】...
开始添加【添加】...
开始添加【修改】...
开始添加【删除】...添加成功！ID：28。用时：97.73999999742955
添加成功！ID：29。用时：131.25000000558794
添加成功！ID：30。用时：253.2399999909103
开始添加【查询】...添加成功！ID：10。用时：159.71999999601394
开始添加【查询字段：col_11】...
开始添加【查询字段：col_21】...
开始添加【查询字段：col_31】...
开始添加【查询字段：col_41】...添加成功！ID：24。用时：125.05000000214204
添加成功！ID：25。用时：162.320000003092
添加成功！ID：26。用时：275.0600000144914
添加成功！ID：27。用时：316.6100000087172
开始添加【列表】...添加成功！ID：10。用时：189.93999998178333
开始添加【列表字段：col_11】...
开始添加【列表字段：col_21】...
开始添加【列表字段：col_31】...
开始添加【列表字段：col_41】...添加成功！ID：24。用时：150.10999998729676
添加成功！ID：25。用时：185.95499999355525
添加成功！ID：26。用时：367.2549999896437
添加成功！ID：27。用时：409.14499998278916
开始添加【表单】...添加成功！ID：10。用时：206.70000000996515
开始添加【表单字段：col_11】...
开始添加【表单字段：col_21】...
开始添加【表单字段：col_31】...
开始添加【表单字段：col_41】...添加成功！ID：24。用时：232.0049999980256
添加成功！ID：25。用时：269.5300000193529
添加成功！ID：26。用时：298.90000002318993
添加成功！ID：27。用时：336.7650000145659
开始添加【后端service】...添加成功！ID：8。用时：238.51499997545034
开始添加【后端 action】...
开始添加【添加】...
开始添加【修改】...
开始添加【删除】...
开始添加【获取】...
开始添加【查询】...
开始添加【获取全部数据】...添加成功！ID：43。用时：134.85499998182058
添加成功！ID：44。用时：198.4449999872595
添加成功！ID：45。用时：235.93499997537583
添加成功！ID：46。用时：313.46999999368563
添加成功！ID：47。用时：357.6699999975972
添加成功！ID：48。用时：398.1349999960512
开始添加【后端model】...添加成功！ID：8。用时：259.1949999909848
基本就是这样。
好像应该加个 try，我不太喜欢加 try，因为不会用。。。
另外计时不准，for 循环并没有等待。
另外这是我写代码写的最长的一次，居然有四百多行，还是重构后的。不重构的话，实在太累。现在能好一点。
网友评论