js 代码运行中插入交互

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);
}

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

原文地址:https://www.cnblogs.com/aloe-n/p/12322507.html

时间: 2024-11-09 04:35:23

js 代码运行中插入交互的相关文章

试着讲清楚:js代码运行机制

一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了. js代码如何运行? 在js代码执行的时候,js的代码是按照顺序执行的,从上到下,这个时候是同步的,不过,有几个例外: 异步的网络请求 事件绑定.事件监听器 时间触发函数 我们模拟一下,js引擎遇到这三类代码的情况: js执行的好好的,正在顺序执行代码,这个时候呢,遇到了异步的网络请求的代码,这个

微信小程序生成海报图片js代码(调试中...)

data: { // 屏幕可用宽高 windowWidth: wx.getSystemInfoSync().windowWidth, windowHeight: wx.getSystemInfoSync().screenHeight, // 图片预览本地文件路径 previewImageUrl: null }, buildPosterSaveAlbum: function() { var imgWidth = 0; // 主图的宽度 var imgHeight = 0; // 主图的高度 let

webapp通过JS代码与移动APP交互

复制地址:http://blog.csdn.net/sky_monkey/article/details/22938125 <span style="font-size:18px;"><script>  function startAPP(){  window.location = "**://**.**/**";  }  function downloadAPP(){  window.location = "http://IP/*

js 使用script或template标签:分离js代码template中的HTML元素

参考:https://www.jianshu.com/p/332252abe016 方法一. script: <div id="app"> <com-first></com-first> </div> <script type="text/x-template" id="comFirst"> <div>component 1</div> </script&g

如何用浏览器调试js代码

按F12打开调试工具 2.  点击控制台,在空白处填写js代码,然后回车运行,如图: 3. 点击调试器 在你要调试的那段js代码上点插入断点 4.  在页面上操作 5.  按F11进行逐步调试 6.  在调试过程中如遇到错误,它会跳出调试,并提示错误信息,可以返回控制台查看 这样你就可以根据提示的错误修改代码

python3用execjs执行JS代码

JS运行环境 Node.js 是Javascript语言服务器端运行环境 安装和配置:https://www.runoob.com/nodejs/nodejs-install-setup.html 测试运行 测试运行JavaScript程序 微软windows操作系统:附件-命令提示符 需进入到js程序的目录下,node命令+js文件名运行程序 调用方法 JS文件 // 函数 function getnow(){ var timestamp=new Date().getTime(); retur

分享一个ASP.NET开发中经常碰到的小问题,修改好的js代码保存生成后,在运行调试时却还是修改前的代码

记得刚开始学ASP.NET的时候就遇到过这个问题,各种无语,明明本地代码改了,保存生成了N遍,甚至重开VS,清浏览器缓存,都没用,调试起来就还是修改之前的js代码,上网查了半天也没查到解释,倒是有人提同样的问题,但是没人能给出答案. 于是那段时间很悲剧的只能每次出现这个问题,就重新建一个Web项目,把代码粘过去... 后来我尝试了下把VS升级到了2013,之后似乎就没出现过这个问题了,于是就以为就是VS2010的bug. 最近到了一家新公司,公司统一用VS2010,于是这个问题就又出现了..但是

利用Google Chrome开发插件,在网页中植入js代码

Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的脚本采集程序,需要测试在网页中的运行情况,因此可以利用Chrome插件进行测试. 1.首先第一步是新建一个文件夹,并新建一个manifest.json文件,内容如下 { "manifest_version": 2, "name": "Js implants&q

WinForm程序执行JS代码的多种方法以及使用WebBrowser与JS交互

原文地址:http://www.cnblogs.com/feiyuhuo/p/5474790.html 方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=D05FCF37-4D9F-4769-9442-0BCEEF907033 或者点击此处下载 Interop.MSScriptCon