由script标签引发了我对setTimeout异步的思考

最新推荐文章于 2024-06-08 19:21:19 发布
最新推荐文章于 2024-06-08 19:21:19 发布
阅读量134 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000017575389
版权

我们都知道在JS中setTimeout是异步执行机制的

像setTimeout(function(){},0)这样

如果在这条语句后面还有很多的同步任务，
它必须要等这些同步任务完成才会执行setTimeout里面的内容

setTimeout(function(){
    不好意思，我要等for循环的同步任务完成才能执行
},0)
for(var i = 0; i < 99999999999; i++){
    这里的任务完成了，才会执行setTimeout的内容
}

那么我所发现的这个问题如下：
如代码所示：在body中插入两个script标签
<body>

<script>
    alert('fir-script');
    setTimeout(()=>{
        alert('setTime');
    },0);
</script>
<script>
    alert('sec-script');
    var str = '测试的字符串';
    alert(str);
</script>

</body>

这里所用的测试字符串是中文
这里需要做3个实验，分为A、B、C

实验A：用比较短的字符串，(有5个中文字体)来测试，执行的弹窗结果是：
fir-script -> sec-script -> '测试字符串' -> setTime
实验B：用较长的字符串，(有45000个中文字体)来测试，结果发现了变化 执行的弹窗结果是：
fir-script ->setTime -> sec-script -> '测试字符串'
实验C：减少部分字符串，(有43000个中文字体)来测试，执行的弹窗结果是：
fir-script -> sec-script -> '测试字符串' -> setTime

在其他条件没有变化的情况下(注意：三次测试setTiemout的时间都是0)
程序执行的顺序似乎和字符串的长度有关
(那其实可以说是和script里面的内容大小有关，那也可以进一步理解为和解析script内容的时间有关)

为了验证上述结论(执行顺序和解析script内容的时间有关)
在实验B的基础上，对setTiemout的时间进行更改，其他保持不变
如B(5)为5ms后执行，即setTimeout(()=>{alert('setTime');},5);
下面我们看一下结果：

B(0): fir-script -> setTime -> sec-script -> '测试字符串'
B(5): fir-script -> setTime -> sec-script -> '测试字符串'
B(10): fir-script ->sec-script -> '测试字符串' -> setTime
B(15): fir-script -> sec-script ->'测试字符串' -> setTime

从上面几个实验我们可以在侧面看出一个现象
setTime 不会出现在 sec-script 和 '测试字符串' 之间，
这也反映了JS是单线程执行的,而且在同步任务里，不受其他script标签的影响

通过这个案例，发现了一些问题，总结如下：

如有其他外部脚本(即使这些脚本都是同步任务)，像setTiemout这些异步任务，不会等待所有同步任务执行完成
只有在同一个script标签里，异步任务要等待该标签的所有同步任务完成才会执行
因为需要去解析脚本，而解析脚本与执行另外的脚本不冲突

最后的最后，如果你在尝试过程中发现与本文的结果不相同，请把测试用的案例”加强“，如把字符串加到10W，这是因为setTimeout的不确定性
欢迎大家一起来探讨

weixin_34405354
关注
第20章　JavaScript通信
唯美清泠
11-16 1166
第20章　JavaScript通信 在传统Web开发中，客户端与服务器端通信主要通过同步请求（页面刷新）来实现，当客户端向服务器端发出HTTP请求之后，服务器端接收并处理这个请求，然后响应完整的Web页面给客户端。这样当发出请求之后，用户就需要慢慢等待，直到服务器响应完毕。如果同步交互的信息和次数很多，这中间就会有大量无用，或者重复性数据挤占带宽。 Ajax完全摒弃了这种信息交互方式，它通过在客户端嵌入一个中间件（XMLHttpRequest组件），并专门负责客户端与服务器端通信，这样就不需要刷新页面，
浏览器与Node的事件循环(Event Loop)有何区别?
Fundebug博客
01-15 7864
前言 本文我们将会介绍 JS 实现异步的原理，并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的。 一、线程与进程 1. 概念 我们经常说 JS 是单线程执行的，指的是一个进程里只有一个主线程，那到底什么是线程？什么是进程？ 官方的说法是：进程是 CPU 资源分配的最小单位；线程是 CPU 调度的最小单位。这两句话并不好理解，我们先来看张图： 进程好比图中的工厂，有单独的...
js中关于setTimeout异步的思考
a_l_f_的博客
11-28 398
js中关于setTimeout的思考 首先看看下面的代码会打印出什么？ for(var i =0;i<5;i++){ setTimeout(function(){ console.log(i); },1000); } 控制台在一秒后输出5次5 这里和浏览器的事件队列和事件循环机制有关系。 也就是说，setTimeout是一个宏任务，它在事件队列里排在了script标签这个宏任务的后面。 浏览器会先执行第一个宏任务，也就是读取scri
TypeScript 基于setTimeout实现在异步方法内同步等待
shaotian100的博客
08-24 2183
同步等待方法封装 async function waitAsync (ms: number): Promise<void> { return new Promise<void>((resolve) => { setTimeout(resolve, ms) }) } 调用DEMO (async () => { await waitAsync(100) console.time('bench 500'
Promise、async、setTimeout异步执行顺序问题
weixin_43933259的博客
07-03 1338
题目一： console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); const newPromise6 = new Promise(function(resolve, reject) { resolve(console.log('promise1')); }); newPromise6.then(function() { console.log('promise2')
layui 动态加载script标签没有加载到dom树里面便执行table.render
codeFly
09-07 702
翻看了一下stackoverflow里的答案，觉得这个理由是说的通的：在append之后，DOM树更新了，但是浏览器的redraw还没有完成，这个时候对刚append上去的元素做操作是会失败的。比较简单的解决方案一个是加setTimeout，时间为0都可以(在我遇到的问题中是这样)；或者，在append函数之后加.hide().show()，但是还不清楚如果是移动端，低端机上这样做元素会不会有闪动。 ...
macrotasks&microtasks引发的思考
weixin_33736832的博客
03-21 112
看了许多的文章阐述macrotasks和microtasks，但是还是由些许的疑问，所以决定自己记录一下。 为什么会有这两个东西的存在呢，这就要追溯到JavaScript设计的问题了，JavaScript设计之初是为了浏览器的交互以及操作DOM等等，如果是多线程，一个线程在DOM上添加了内容，一个线程删除了这个DOM，那浏览器就不知道应该哪个线程为准了，那就乱套了。所以也就决定了JavaScrip...
前端渲染大量数据思路【虚拟列表】【异步机制】
weixin_64433668的博客
06-08 811
当浏览器遇到性能瓶颈导致页面卡顿时，你会怎么处理？如何查找问题的原因？浏览器本身自带性能检测工具，通常我们分析由脚本导致的页面卡顿会选择选项卡，在其中我们可以找到导致页面卡顿的函数，另外通过观察我们可以看到脚本的执行时间占比以及页面卡顿的程度。此外还有内存选项卡，可以截取当前页面的内存快照，由于我们的页面通常不像服务器那样一直运行，所以平常我们也不会过于关注页面的内存使用问题。
前端最全面试题
热门推荐
吴小迪的博客
05-04 15万+
今天给朋友们分享一到三年前端最全的面试题。 JS基础题： JS的数据类型有哪些？ 答案见：JS数据类型详解 如何判断JS变量的数据类型？ typeof() instanceof constructor toString typeof求解的可能值有哪些？ “number” “string” “boolean” “undefined” “object” “symbol” “function”...
2019前端面试常问
qq_42143163的博客
08-07 455
面试项目简介： Vue:hash（散列算法）DOM Diff算法（React） Node.js https://www.cnblogs.com/DCL1314/p/7903085.html 路由传参： https://www.jianshu.com/p/4debd60d3187#!/xh 一、直接在路由中写参数 二、通过prams传参 三、通过query传参 Vue数据双向绑定: https://...
前端面试2022
baidu_41075661的博客
02-03 439
常用函数：https://blog.csdn.net/mus123/article/details/106499506 这一次我应聘的岗位是前端开发工程师。成为一名优秀的程序员是我的追求，为此在研究生阶段我很早就结合岗位要求进行了准备。今年6月到8月份，我在武汉金山办公软件有限公司实习，在这期间参与了小组内的代码开发，并且重新系统的学习了前端的相关知识，包括：前端基础知识，React框架，以及相关的网络协议，能够熟练使用git进行团队合作开发。同时作为一名研究生，在读研期间我成功发表了2篇EI论文，2篇软著
面试分享：两年工作经验成功面试阿里P6总结
weixin_45556713的博客
09-12 5984
前言 本文主要给大家带来一些我面试的经历和经验，希望对正在求职的同学有所帮助。我先大致说下面试之前的个人情况：2017年7月正式入职海康威视数字技术股份有限公司，使用Vue.js技术栈。 我写的篇幅可能有点长，如果只想看成功的面试请直接从阿里企业智能事业部（一面）开始，大家见谅哈。 这里推荐阅读之前写的文章（前面两篇实用型，后面两篇对面试应该会有帮助）： Vue CLI 3结合Lerna进行UI框...
javascript真的是异步的吗？且看setTimeout的实现原理以及setTimeout(0)的使用场景
aty
07-08 1万+
JavaScript是单线程执行的，无法同时执行多段代码。当某一段代码正在执行的时候，所有后续的任务都必须等待，形成一个队列。一旦当前任务执行完毕，再从队列中取出下一个任务，这也常被称为 “阻塞式执行”。所以一次鼠标点击，或是计时器到达时间点，或是Ajax请求完成触发了回调函数，这些事件处理程序或回调函数都不会立即运行，而是立即排队，一旦线程有空闲就执行。所以 setTimeout 并不能保证执行的时间，是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
火狐浏览器下JS代码不兼容setTimeout函数失效无效不运行执行的解决办法
weixin_34018169的博客
11-14 510
今天检查自己用JQuery+AJAX+PHP做的网站后台登录检测，发现登陆成功后执行页面跳转函数这段JavaScript（JS）代码特效在IE和谷歌浏览器Chrome下都可以很好地执行，兼容性还不错。结果到了火狐（FireFox）浏览器下setTimeout这个JS内置函数不执行了，无效了，也没报错！打开FireBUG指望它能检测出JS的错误，结果没用...Javascript(JS)脚本代码在各...
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
最新发布
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
深入理解setTimeout：JS单线程与异步编程
本文将深入探讨如何通过setTimeout函数理解JavaScript的运行机制，特别是针对单线程环境下的异步编程。setTimeout是一个核心工具，它允许你在指定的毫秒后执行一个函数或代码块，返回一个唯一的计时器ID，用于后续...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值