标签：

js 代码运行中插入交互 配景

比来突发奇想,如果能在 js 运行时插入用户操纵,是否就可以看到每一步的状态了呢?

以冒泡排序为例,最终实现的效果是这样的:

思路

我们知道,如果代码中 await 一个 promise,那么这行代码需要等到 promise 状态为 resolved 时才华向下继续执行.

例如:

await new Promise(resolve=>{}),这样代码将会一直在这里期待下去,因为这个 Promise 的状态为pending.

有了这个思路,我们只需想步伐将这个 promise 的状态改为 resolved,就可以在代码终端后继续执行.

如何控制一个 promise 的状态

代码很简单,挪用 func()时,执行了 p 的 resolve()要领,将 p 的状态改为了 resolved.

res = []; let func = undefined; let p = new Promise(resolve => (func = () => resolve())); console.log(p); func(); console.log(p);

功效如下:

Promise { <pending> } Promise { undefined } 封装

这样封装之后只需要在需要暂停的处所插入 await nextStepPromiseFactory();

let func = undefined; function nextStepPromiseFactory() { return new Promise(resolve => (func = () => resolve())); } for (let i = 0; i < 10; i++) { await nextStepPromiseFactory(); console.log(i); }

将以上代码粘贴进浏览器的控制台,效果如下:

js 代码运行中插入交互

，