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

时间 2020-06-14

原文原文链接

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

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

若是在这条语句后面还有不少的同步任务，
它必需要等这些同步任务完成才会执行setTimeout里面的内容javascript

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

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

<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标签的影响code

经过这个案例，发现了一些问题，总结以下：ip

若有其余外部脚本(即便这些脚本都是同步任务)，像setTiemout这些异步任务，不会等待全部同步任务执行完成
只有在同一个script标签里，异步任务要等待该标签的全部同步任务完成才会执行
由于须要去解析脚本，而解析脚本与执行另外的脚本不冲突

最后的最后，若是你在尝试过程当中发现与本文的结果不相同，请把测试用的案例”增强“，如把字符串加到10W，这是由于setTimeout的不肯定性
欢迎你们一块儿来探讨字符串