js同步异步

JS异步

1. 定义

   • js特点是单线程(render progress中main thread)，同一时间只能做一件事，比如对某个dom元素添加、删除不能同时执行

   • js可以创建多个线程，有同步和异步

2. 同步和异步

   • 同步任务都是主线程上执行，形成一个执行栈
   • 异步任务：js异步通过异步函数实现
     三种类型
     1. 普通事件 click、resize等
     2. 资源加载 load、error等
     3. 定时器 setTimeout
        异步任务相关回调函数添加到任务队列中(消息队列)

3. 执行顺序

   1. 先执行主线程执行栈的同步任务
   2. 异步任务(回调函数)放入任务队列(消息队列)中
   3. 一旦执行栈中的同步任务执行完成，系统按照顺序读取消息队列中任务，放入主线程执行栈执行
   4. 主线程执行栈不断重复获取任务，执行任务，再获取任务，再执行，这种执行机制成为事件循环(event loop)

4. 如何解决异步方式

   1. 回调函数(js中函数作为参数调用是极为重要形式)

   2. 案列

      ajax({
      method:'get',
      success:(data) =>{
        console.log(data)
      }
      })
      function ajax(options){
       const xhr=new XMLHttpRequest();
       const qs=resolveParams(options.data)
       if(options.method.toUpperCase() === 'GET'){
           xhr.open(options.method,options.url+"?"+qs)
           xhr.send()
       }else if(options.method.toUpperCase()==='POST'){
           xhr.open(options.method,options.url)
           xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
           xhr.send(qs)
       }
      xhr.onreadyStateChange=function(e){
       if(this.readyState === 4 && this.status === 200){
           const res=JSON.parse(this.respondText)
           options.success(res)
       }
      }