JavaScript重写alert,confirm,prompt方法(JavaScript实现线程非阻塞式暂停和启动)

2023-11-06

        得有段时间没好好写篇博客了,这次我们从一个题目开始吧。

        首先我给大家出一道题目,大家可以先思考一下,再往下看。

        题目是:请用JavaScript重写confirm方法,实现和confirm同样的功能。

        乍一看可能感觉很简单,定义一个confirm方法覆盖window对象原生的 confirm方法,在方法里用div画一个弹框,参数中传入两个回调方法,当用户点击“确定”或者“取消”的时候分别调用相应的回调方法,如下:

        confirm("确定吗?",callBack1,callBack2);

        但是这样和原来的confirm()方法是不一样的,原来的confirm()方法只有一个参数,只传入要显示的消息,并且用户点击按钮之前线程是暂停的,只有当用户点击确定或者取消后,接下来的代码才会继续执行,并不需要回调方法,这样业务逻辑更清晰有条理。

        如上面两图,原生的confirm方法在各个浏览器样式不同,但功能相同,即都能够暂停程序执行,直到用户点击了按钮。

        那么我们能否用纯JavaScript做出一个样式不同但功能相同的confirm方法来覆盖原生的confirm方法呢,答案是可以的,思路就是暂停程序的执行,是暂停而不是堵塞JavaScript线程,因为一旦JavaScript线程被阻塞,dom渲染的线程也会被挂起,从而导致用户无法点击弹框出现的按钮,所以像while(true){...}这种写法是不可取的,JavaScript不像c或c++那样,JavaScript出现这种死循环很快会堆栈溢出,程序就挡掉了。那么如何实现代码的暂停呢,es6中新出了await关键字,await简单来讲就是让程序同步而不是以异步的方式执行,字面意思就是等待,等着程序执行完再进行下一步,await只能用在异步的方法里面,既带有async标记的function。我今天跟大家分享的实现程序暂停的方法就是通过await实现的。

        首先,我们可以构造一个同步函数, waitUserClick()

this.WAIT_USER_CLICK=true;//等待用户点击的状态
this.SYS_USER_FEED_BACK=true;//用户点击回馈缓存
/**
 * 等待用户点击状态方法,每100毫秒询问一次
 * @param  {[type]} val [description]
 * @return {[type]}     [description]
 */
this.waitUserClick=function(){
	return new Promise(function(resolve){
		setTimeout(function(){
			resolve();
		},100);
	});
}

        waitUserClick()相当于一个同步的方法,执行这个函数结束需要等待100毫秒,这个等待多长时间我们可以随意调节,这个函数的作用就是让你等待100毫秒,其他的什么都不干,那么有个这个等待函数了,我们可以接下来实现一个while循环来监听用户有没有点击按钮。


                
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript重写alert,confirm,prompt方法(JavaScript实现线程非阻塞式暂停和启动) 的相关文章

随机推荐

  • 图神经网络 PyTorch Geometric 入门教程

    简介 Graph Neural Networks 简称 GNN 称为图神经网络 是深度学习中近年来一个比较受关注的领域 近年来 GNN 在学术界受到的关注越来越多 与之相关的论文数量呈上升趋势 GNN 通过对信息的传递 转换和聚合实现特征的
  • php性能优化

    前言 在经历2 3年的时间 php程序员可以完成基本的功能性开发 但是这时候会有一个小瓶颈 就是不知道怎么去优化自己的代码 优化代码主要有两方面 1 php代码规范的优化 让自己代码变的更具可维护性 可读性更强 便于团队开发协作 这里就不作
  • 从char到QChar

    char类型是c c 中内置的类型 描述了1个字节的内存信息的解析 比如 char gemfield g 那么在由gemfield标记的这块内存的大小就是1个字节 信息就是01100111 8位 再比如 char gemfield 汉 那么
  • Java设计模式之观察者模式

    摘录 观察者模式是对象的行为模式 又叫发布 订阅 Publish Subscribe 模式 模型 视图 Model View 模式 源 监听器 Source Listener 模式或从属者 Dependents 模式 观察者模式定义了一种一
  • linux rfkill

    http blog csdn net eager7 article details 8121143
  • FFmpeg音视频播放器流程

    音视频播放器流程 ffmpeg解封装解码流程API ffmpeg官网 FFmpeg
  • [STM32]KEIL调试程序进入HardFault_Handler异常处理总结

    在做CORTEX M3单片机开发的时候 如STM32 可能会遇到设备跑着跑着程序死机的情况 往往调试起来很多时候发现是程序进入HardFault Handler系统异常 根据相关资料和M3权威指南是可以通过调试查找出程序的问题点和解决问题的
  • eclipse gradle打包_Spring Boot(十二):Spring Boot 如何测试打包部署

    部分面试资料链接 https pan baidu com s 1qDb2YoCopCHoQXH15jiLhA 密码 jsam 想获得全部面试必看资料 关注公众号 大家可以在公众号后台回复 知乎 即可 有很多网友会时不时的问我 Spring
  • 一个人的成功不是没有理由的!(人物之楼天城)

    昨天 杭州第十四中学请来毕业生楼天城 给全体学生做励志讲座 讲高中三年的学习生活和理科思维的培养 讲座前 老师介绍 楼天城同学2004年毕业于十四中 保送清华大学 博士毕业 是公认的计算机天才 公认的中国大学生编程竞赛第一人 常以一人单挑一
  • 利用python摘取文本中所需信息,并保存为txt格式

    项目所需 IC设计中难免会处理大量文本信息 我就在项目中遇到了 对于一个几万行的解码模块 提取出其中的指令 如果不用脚本将会很麻烦 下面我将一个小小的例子分享给大家 刚学python 如果有更方便的实现方法清多多指教 目的 1 在几万行解码
  • Git常用命令总结

    Git常用命令总结 git init 在本地新建一个repo 进入一个项目目录 执行git init 会初始化一个repo 并在当前文件夹下创建一个 git文件夹 git clone 获取一个url对应的远程Git repo 创建一个loc
  • openssl的证书链验证

    原文地址 http blog csdn net dog250 article details 5442914 使用openssl验证证书链可以用以下命令 debian home zhaoya openssl openssl verify C
  • C语言分支循环语句

    需提前看 初识C语言 5 C语言一些基本常识 目录 分支语句 if语句 单if语句使用 if else语句 if else if else语句 switch语句 switch基本结构 break作用 default作用 循环语句 while
  • 【Vscode

    Rmd文件转html R语言环境 Vscode扩展安装及配置 配置radian R依赖包 pandoc安装 配置pandoc环境变量 验证是否有效 转rmd为html 注意本文代码块均为R语言代码 在R语言环境下执行即可 R语言环境 官网中
  • shell I/O重定向

    shell重定向 lt 改变标准输入 program lt file 可将program 的标准输入改为file tr d r lt dos file txt 以 gt 改变标准输出 program gt file 可将program的标准
  • Qt基础之三十:百万级任务并发处理

    在实际的开发过程中 经常会遇到要处理大量任务场景 比如说压缩文件夹中的所有文件 对文件夹中的所有文件加密 上传文件夹中的所有文件到ftp等等 这里说百万级并不夸张 理论上文件夹中有任意多个文件都是可以的 本文以压缩文件夹中的100万张jpg
  • 三国志13pk版登录武将输入中文名方法与更改图像详解

    今天来个正经的文 三国志13里登录武将 设定姓名时 如果用的是自带输入法 就会出现一堆乱码 这时候 有两种解决方法 下载一个具有大五码的输入法 然后输入时候既要切换输入法 切换繁体 切换窗口模式 很麻烦 尤其在输入列传的时候 打很多字会很不
  • 【架构优化过程思考】技术方案评估的三个维度

    方案的选择决定了当下实现方案的资源投入及产出对产 也决定后续的成本 评估一个方案 首先要评估这个方案的有效性 也就是说要解决这个问题 实现目标 当前的这个方案是否足够的有效 还是在部分的场景下有效 如果是全部的有效那么该方案就不会出现上线之
  • 二叉树--合并二叉树

    问题 已知两颗二叉树 将它们合并成一颗二叉树 合并规则是 都存在的结点 就将结点值加起来 否则空的位置就由另一个树的结点来代替 思路 通过二叉树的前序遍历方法进行遍历 同时 t1二叉树作为蓝本进行计算 注意设置两个指针记录t1和t2遍历到的
  • JavaScript重写alert,confirm,prompt方法(JavaScript实现线程非阻塞式暂停和启动)

    得有段时间没好好写篇博客了 这次我们从一个题目开始吧 首先我给大家出一道题目 大家可以先思考一下 再往下看 题目是 请用JavaScript重写confirm方法 实现和confirm同样的功能 乍一看可能感觉很简单 定义一个confirm