美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > JavaScript代码执行的先后顺序问题

JavaScript代码执行的先后顺序问题

发布时间:2019-08-09 19:20编辑:美高梅官方网站开户浏览(117)

    前言

    一、js--->单线程

    setTimeout,前端工程师必定会打交道的一个函数。它看上去非常的简单,朴实,有着一个很不平凡的名字--定时器。其实网上关于JavaScript中setTimeout的文章很多,但总感觉例子不够直接具体,因此写了个简单的例子并加以解释希望能让大家明白setTimeout是如何执行的。下面话不多说了,来一起看看详细的介绍:

       严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的。

    实例代码如下:

      1、什么是单线程?

     var time1=new Date().getTime();
     console.log(1,time1);
     setTimeout(function(){
     var time4=new Date().getTime();
     console.log(4,time4);
     for(var a=0;a<10000000000;a  ){
      a=a 1;
     }
     var time2=new Date().getTime();
     console.log(2,time2);
     },2000);
    
     setTimeout(function(){
     var time3=new Date().getTime();
     console.log(3,time3);
     },1000);
     setTimeout(function(){
     var time5=new Date().getTime();
     console.log(5,time5);
     },3000);
     setTimeout(function(){
     var time6=new Date().getTime();
     console.log(6,time6);
     },14000);
    

      通俗点说,就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行。我们拿一段代码来解释一下吧

    代码十分简单,想必大家都能看懂,执行结果如下:

     for(var i=1;i<=3;i  ){
       setTimeout(function(){
         console.log(i); //输出:4,4,4
       },0)
     }
    

    美高梅官方网站开户 1

      我们来看一下上面的这段代码,既然延时器时间设置为0,那么应该执行一遍循环就应该立即打印出一个i,但是最终的打印结果为:4,4,4。之所以会出现上面的结果,正是因为js代码是单线程应用。

    解释:setTimeout属于异步执行函数,当程序执行完console.log(1,time1)后;遇到setTimeout会将该函数放入等待队列,等待当前主程序执行完毕后开始执行setTimeout,由于后面的几个都是setTimeout,因此都会放到等待队列~~~

      在执行过程中,先遇到for循环,for循环先进入线程。当i=1时,循环走到setTimeOut后,此时的for循环还没有执行完成,setTimeOut就会被放入一个地方(线程池)等待执行。此时for循环继续执行,当i=2时,for循环仍没有执行完,这时的setTimeOut仍会被放在线程池中等待执行……依次类推,直到for循环转完3遍后,for循环执行完了,此时线程空闲了,在线程池中等待执行的setTimeOut依次执行打印i,而for循环执行完成后,i变成了4,所以打印出了三个4。

    那么这些队列里的函数谁先执行呢?就是根据setTimeout里的第二个参数(延迟时间)决定的,例如            

      2、如果想要改变上面的状况可以运用以下代码

     setTimeout(function(){
     var time3=new Date().getTime();
     console.log(3,time3);
     },1000);
    
    //将var变为let
    for(let i=1; i<=3; i  ){
      setTimeOut(function(){
        console.log(i); //输出的结果为1,2,3
      },0);
    }
    //用自执行函数进行包裹
    for(var i=1; i<=3; i  ){
      !function(i){
        setTimeOut(function(){
          console.log(i); //输出的结果为1,2,3
        },0);
      }(i)
    }
    

    那么主程序执行完成以后的1000ms后就会执行这段代码,如果延迟时间为2000,那么主程序执行完成后2000ms就会执行这段代码,只需记住一点:延迟时间始终是相对主程序执行完毕的那个时间算的 ,并且多个setTimeout的先后顺序也是由这个延迟时间决定的,如果遇到某个setTimeout需要花费大量的时间怎么办?可以参照上图里执行结果的数字2和数字5对应的时间,由于js是单线程,所以当执行到这个setTimeout后,会将这个程序执行完成后再去执行下一个setTimeout,无论下一个setTimeout的延迟时间为多少,如果这两个setTimeout时间的差值小于第一个setTimeout消耗的时间,程序会等待这个setTimeout执行完成后立即执行下一个setTimeout,如果差值大于消耗的时间,就按照和主程序约定的延迟(setTimeout里的第二个参数)执行即可

    二、js中的函数作用域和代码的执行

    总结

      >>>函数作用域

    美高梅官方网站开户 ,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

    我们先来了解一下以下几个概念:

    您可能感兴趣的文章:

    • JavaScript中立即执行函数实例详解
    • JavaScript代码执行的先后顺序问题
    • JavaScript自执行函数和jQuery扩展方法详解
    • Js中async/await的执行顺序详解
    • js使用generator函数同步执行ajax任务
    • javascript基础进阶_深入剖析执行环境及作用域链
    • 对于Javascript 执行上下文的全面了解
    • Javascript中八种遍历方法的执行速度深度对比
    • javascript作用域链与执行环境详解
    • 提高JavaScript执行效率的23个实用技巧
    • ie下js不执行的几种可能
    • 详细分析单线程JS执行问题

      1、在js语言中,没有类似于c语言这样的块级作用域。

      2、js语言中的顶级作用域为window对象范围内,称为全局作用域,在全局作用域中声明的变量为全局变量。

      3、js函数范围内的变量只能在函数内部使用,函数外部无法使用,这样的变量为局部变量。

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:JavaScript代码执行的先后顺序问题

    关键词: 美高梅开户