zoukankan      html  css  js  c++  java
  • js中的同步中异步执行代码

    for(var i=0;i<10;i++){
      setTimeout(function(){
        console.log(i)
      },0)
    }
    //结果是输出10次10;

    一:执行机制,同步先执行-异步-最后回调再执行
    for循环是同步代码,而setTimeout中的是异步代码。

    JS中既有同步又有异步的情况下,先从上到下执行同步代码,碰到异步的代码会将其插入到任务队列当中等待。

    而setTimeout是延时,也就是说碰到setTimeout这个异步的代码块会根据它里面的第二个参数:延时时间来将代码插入到任务队列当中。

    比如上面这段代码中,第二个参数延时时间是0,也就是说执行到它的时候会在0ms之后将它插入到任务队列当中。同步代码都执行完成之后,那么JS引擎就空闲了,这个时候就轮到任务队列中的异步代码依次加载了。

    二:作用域链

    执行settimeout时输出i,现在当前执行函数中查找i,查找失败,找到全局作用域i,此时for循环已经执行完毕i=10;

    解决办法-----------------------------立即执行函数,返回当前i

    for(var i=0;i<10;i++){

    function(a){

      setTimeout(function(){
        console.log(i)
      },0)}(i)

      
    }

    输出0 1 2 3 4 5 6 7 8 9 

    解决办法-----------------------------let块

    for(let i=0;i<10;i++){
      setTimeout(function(){
        console.log(i)
      },0)
    }

    let  i  的是区块变量,每个i只能存活到大括号结束,并不会把后面的for循环的  i  值赋给前面的setTimeout中的i;

      i被绑定到循环体的每一次迭代中,确保上一次迭代结束的值重新被赋值。

      setTimeout里面的function()属于一个新的域,

      通过 var 定义的变量是无法传入到这个函数执行域中的,

      通过 let 来声明块变量,这时候变量就能作用于这个块,所以 function就能使用 i 这个变量了;

    var i  则是局部变量,这个 i 的生命周期不受for循环的大括号限制;

  • 相关阅读:
    提示“Resource temporarily unavailable”的原因及解决办法
    TQ2440与西门子S7-200 PLC自由口通信实现过程中问题总结
    SQL与SQL Server
    JavaScript:事件对象Event和冒泡
    JavaScript动画:offset和匀速动画详解(含轮播图的实现)
    JavaScript基础:BOM的常见内置方法和内置对象
    JavaScript实现Tab栏切换
    JavaScript基础:DOM操作详解
    JavaScript语法基础:数组的常用方法详解
    JavaScript语法详解:if语句&for循环&函数
  • 原文地址:https://www.cnblogs.com/sunhuinaxixi/p/10713134.html
Copyright © 2011-2022 走看看