异步

什么是单线程，和异步的关系

 1 单线程----只有一个线程，只能做一件事情
 2 原因--避免DOM渲染的冲突
 3 解决方案--异步

//循环运行期间，JS执行和DOM渲染暂时卡顿
var  i,sum = 0;
for( i = 0;i<100000000;i++) {
    sum+=i;
 }
 console.log(sum);


// alert  不处理，JS执行和DOM渲染时卡顿
console.log(1)
alert('hello')
console.log(2)

原因-避免DOM渲染冲突

1 浏览器需要渲染DOM
2 JS可以修改DOM结构
3 JS执行的时候，浏览器DOM渲染会暂停
4 两段JS也不能同时执行（都修改DOM就会冲突）
5 JS本身也是单线程的
6 webworker支持多线程，但是不能访问DOM

解决单线程的方法—异步

console.log(100)
setTimeout(function(){
    console.log(200)  //反正 1000ms之后执行
 },1000) //先不管它，先让其他Js代码运行，其他代码执行后在执行
 console.log(300)
 console.log(400)
 100   300 400 200

ajax-异步

console.log(100)
$.ajax ({
     url:'xxxxxxx',
     success:function(result) {   //ajax加载完才执行
         console.log(result)   //先不管它，先让JS代码运行
      }
 })
console.log(300)
console.log(400)
//先把该执行的执行完了，异步最后在执行

解决方案–异步

1 单线程就是同时只能做一件事，两段JS不能同时执行
2 原因就是避免DOM渲染的冲突
3 异步是一种“无奈”的解决方案，虽然有很多问题

什么是event-loop（重点）

1 事件轮询或事件循环  JS实现异步的具体解决方案
2  同步代码，直接执行
3 异步函数先放在异步队列中
4 待同步函数执行完毕，轮询执行 异步队列的函数

实例分析

setTimeout(function () {
    console.log(100)
 })
 console.log(200)

//主进程
console.log(200)

//异步队列
function() { 
   console.log(100)
 }












setTimeout(function () {
    console.log(1)
 },100)
 setTimeout(function () {
     console.lo(2)
  } )
  console.log(3)

//主进程
console.log(3)
//异步队列
//立即被执行
functin () {
    console.log(2)
 }
// 100s 之后被放入
function () {
    console.log(1)
 }

知识串联

1 单线程--同一时间只能做一件事情
2 原因-避免DOM渲染冲突
3 解决方案---异步
4 实现方法----event  loop

回顾

1 事件轮询，JS实现异步的具体解决方案
2 同步代码，直接执行
3 异步函数先放在异步队列中
4 待同步函数执行完毕，轮询执行，异步队列的函数

是否用过jQuery的Deferred

1 jQuery1.5的变化
2 使用jQuery Deferred

jQery1.5的变化

var   ajax = $.ajax({
  url:'data.json',
  success:function () {
       console.log('success1')
       console.log('success2')
       console.log('success3')
   },
   error:function() {
       console.log('error')
    }
 })
console.log(ajax)  //返回一个XHM对象



//很像Promise的写法
var  ajax  =  $.ajax('data.json')
ajax.then(function(){
      console.log('success 1')
 },function () {
      console.log('error 1')
  })
  .then(function () {
     console.log('success 2')
   },function () {
       console.log('error 2')
    })
1 无法改变JS异步和单线程的本质
2 只能从写法上杜绝callback这种样式
3 他是一种语法糖形式，但是解耦了代码
4 很好的体现：开放封闭原则

使用jQuery Deferred

// 给出一段非常简单的异步操作代码，使用setTimeout函数
var   wait = function () {
     var task function () {
         console.log('执行完成')
      }
      setTimeout(task,2000)
 }
 wait()
//新增需求：要在执行之后进行某些特别复杂的操作，代码可能会很多，而且分好几个步骤

使用jQuery Deferred

 function waitHandle() {
     var  dtd = $.Deferred()
     
      var  wait =  function  (dtd) {
          var task = function () { 
                console.log('软件完成')
           }
       }
  }