zoukankan      html  css  js  c++  java
  • JavaScript基础知识——异步和单线程

    1.同步和异步的区别是什么?分别举一个同步和异步的例子
    2.一个关于setTimeout的笔试题
    3.前端使用异步的场景有哪些

      在可能发生等待的情况,等待的过程中不能像alert一样阻塞程序运行
        - 定时任务:setTimeout、setInterval
        - 网络请求:ajax请求,动态```<img>```加载
       - 事件绑定
    //ajax请求
    console.log('start');
    $.get('data/data1.json',function(data1){
    console.log(data1);
    })
    console.log('end');
    //start
    //end
    //数据
      ```
      ```
    //图片加载
    console.log('start');
    var img=document.createElement('img')
    img.onload=function(){
    console.log('loaded');
    }
    img.src='images/icon.jpg'
    document.body.appendChild(img)
    console.log('end');
    //start
    //end
    //loaded
      ```
      - 事件绑定
      ```
    console.log('start');
    document.getElementById('btn1').addEventListener('click',function(){
    console.log('clicked')
    })
    console.log('end');
    //start
    //end
    //点击打印clicked
      ```
    - 异步和单线程
      ```
    console.log(100);
    setTimeout(function(){
    console.log(200);
    })  //未设置等待时间
    console.log(300);
    //100
    //300
    //200
      ```
    - 执行第一行,打印100
    - 执行setTimeout后,传入setTimeout的函数会被暂存起来,不会立即执行(单线程的特点,不能同时执行两个任务)
    - 执行最后一行,打印300
    - 待所有任务执行完,处于空闲状态,才执行暂存的任务
    - 暂存的setTimeout无等待时间,立即执行
     

      知识点:

      1、什么是异步

    异步:

    console.log(100);
    setTimeout(()=>{
        console.log(200);
    },1000);
    console.log(300);
    
    //100
    //300
    //+1s 200

    同步:

    console.log(100);
    alert(200);// 此处如果不确定,就会等待,只有确定后,下面的才能执行
    console.log(300);

      何时需要异步?

      a、在可能发生等待的情况;

      b、等待过程中不能像alert一样阻塞程序运行

      c、等待的情况都需要异步

      2、前端使用异步的场景

      3、异步和单线程

      

  • 相关阅读:
    python正则表达式(+ {})(二)
    14丨 HTTP有哪些优点?又有哪些缺点?
    python正则表达式(. *)(一)
    12丨响应状态码该怎么用?
    Fiddler—Fiddler+willow插件应用(十四)
    11丨你能写出正确的网址吗?
    【洛谷P1858】多人背包
    【洛谷P3387】(模板)缩点
    【洛谷P2184】贪婪大陆
    Leetcode: 39. Combination Sum
  • 原文地址:https://www.cnblogs.com/utrustme/p/8572105.html
Copyright © 2011-2022 走看看