浅谈js异步

最新推荐文章于 2022-12-13 20:07:31 发布

weixin_30780221

最新推荐文章于 2022-12-13 20:07:31 发布

阅读量63

点赞数

原文链接：http://www.cnblogs.com/eco-just/p/10389927.html

版权

大家都知道，js是一个单线程的语言（只有一个线程来执行js函数），所以如果某一个函数执行任务耗时比较长的话，就会造成阻塞，使得后续任务一直处于等待状态。

一、阻塞示例

        function f1(){
            for (var i = 0; i < 2000; i++) {
                    console.log('f1');
            }
        }
        function f2(){
            console.log('f2');
        }
        f1();
        f2();

f1、f2依次执行，控制台打印：

二、setTimeout函数

        function f1(){
            for (var i = 0; i < 2000; i++) {
                setTimeout(()=>{
                    console.log('f1');
                },500);
            }
        }
        function f2(){
            console.log('f2');
        }
        f1();
        f2();

f1、f2依次执行，控制台打印：

看上去好像先执行了f2，后续才执行了f1，其实不然，实际上依旧是先执行f1，再执行f2，没有实现异步，f1、f2依然是同步的（不要质疑，我说的是f1,f2没有实现异步）。

首先执行f1，利用for循环开启2000个定时器；

然后执行f2，打印字符串；

时间到了，2000个定时器触发。

注意：定时器到了时间触发之后，也并不是立即执行的，这要取决于js单线程内有没有还有没有函数正在运行，我们来看一个例子：

        function f8(){
            for (let i = 0; i < 2000; i++) {
                setTimeout(()=>{
                    console.log('f8'+i);
                },50);
            }
        }
        function f9(){
            for (let j = 0; j < 2000; j++) {
                    console.log('f9'+j);
            }
        }
        f8();
        f9();