javascript的同步和异步

同步和异步

什么是同步和异步？

• 同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行下一个任务。

• 异步任务：

  • 定时器 setTimeout setInterval
  • 事件
  • ajax的异步请求
  • es6的promise

问：为什么javascript有异步机制 :
1. javascript 是一个单线程语言 ;
2. javascript 之中又有一些非常耗时的操作;

解决耗时程序的方案 :
会被 javascript 解释器挂起 , 必须等到所有正常的代码运行结束，才会去考虑执行特殊的耗时操作

    console.time("test");
    for(var i = 0 ;  i < 100 ; i ++){
          console.log(1);
    }
    console.timeEnd("test"); // 查看执行的时间

    //1、同步代码,一步又一步，前面出问题，后面出问题
    console.log('同步start');
    for(let i=0;i<5;i++){ 
      console.log('123');  //打印5次123
    }
    console.log('同步end');
    /*
     同步start
     5 123
     同步end
    */
    //同步总时间：各个模块时间的和

   
    // 异步程序的构成 : 所有的异步程序都有一个等待执行的函数 ;
    // 同步代码执行结束之后才会回头调用的函数称之为 回调函数 ;
    
    //2、异步，多线程，同时进行，互不干扰，到达时间不一致
    console.log('异步start');
    setTimeout(function(){
      console.log('setTimeout');
      
    },2000);
    console.log('异步end');
    /*
     异步start
     异步end
     setTimeout
    */
    //异步总时间：时间长的那个模块的时间

    //异步代码：定时器、ajax（注意代码之间的顺序问题）
    //注意事项：如果某个功能需要用到某个ajax的数据，需要保证代码的顺序，记得要把该功能写在ajax的回调函数里面。
    
   // 如下面 ajax的异步请求
    var str = 'fqniu'
    var ajaxHttp = new XMLHttpRequest()
    ajax.open("get", "./data.php", true)
    console.log(str)
    

  // 简单看下这个题：
    for (var i = 0; i < 5; i++) {
      setTimeout(() => {
        console.log(i)
      }, 1000);
    }

结果为：

 for (var i = 0; i < 10; i++) {
      setTimeout(function () {
        console.log(i);
      }, 0) //注意：这里时间与上面不一样，但是并不影响结果的输入，以JavaScript机制为主
    }
   // 打印结果依旧是 : 10 , 10 

  <ul>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
    <li>hello world</li>
  </ul>
  
   var lis = document.querySelectorAll("li");
    for (var i = 0; i < lis.length; i++) {
      ali[i].onclick = function () {
        console.log(i);
      }
    }
    // 点击之后 打印结果是 : 5 
    

补充：异步ajax的注意点

      // 创建一个 ajax 请求
      var xhr = new XMLHttpRequest()
      xhr.open(method, url)
      xhr.send()
      // 注意点： 上面请求是 同步 , 而从响应之后是 异步响应
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
          console.log(xhr.responseText)
        }
      }