js单线程及处理

最新推荐文章于 2024-08-26 20:57:11 发布

森林的尽头是阳光

最新推荐文章于 2024-08-26 20:57:11 发布

阅读量510

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/sinat_41904410/article/details/99703366

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

什么是单线程

同一时间只能做一件事，就是单线程

js为什么是单线程

因为避免浏览器渲染DOM冲突

怎么解决单线程

异步

event-loop 事件轮询

js实现异步的具体解决方案
同步代码直接执行
异步代码放在异步队列中，ajax要等到成功后放入队列
待同步函数执行完成之后，轮询执行异步队列的函数

ajax

$.ajax({
      url:"url",
      dataType:"json",
      success:function(data){
              ...执行成功
      }，
      error:funciton(err){
             ... 打印错误
      }
})

Promise

链式调用
状态不可逆（pending-进行中、fullfilled-成功、rejected-失败）
多种写法详见：https://blog.csdn.net/sinat_41904410/article/details/99189547

let p = new Promise(function(resolve,reject){
           // resolve成功
           // reject失败
           $.ajax({
               url:"data/arr.txt",
               dataType: "json",
               success(arr){
                  resolve(arr);
               },
               error(err){
                   reject(err);
               }
           })
       })

       p.then(function(arr){
           // 成功   
           console.log("成功") ;
           console.log(arr)
       },function(err){
           // 失败
           console.log("失败")  
           console.log(err);
       })

async-await


// 最直接的同步写法，不用回调
// loadImage用于获取数据的的函数
const load = async function(){
     const result1 = await  loadImage(src1);
     console.log(result1)// 可以进行操作
     const result2 = await  loadImage(src2);
     console.log(result2)// 可以进行操作
}

generator

// *可以挨着function  也可以挨着函数名，也可以两个都不挨-------但是不能连着两个
//  yield暂停、放弃的意思，*  yield配合使用就是generator函数
// generator函数, 返回一个函数，使用时需要接收
// next()执行一次走一个，以yield隔开
function *show(){
    console.log("a");
    yield;
    console.log("b");
}

let gen = show();
gen.next();
gen.next();

jquery-deffered

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery.js"></script>
</head>
<body>
    <script>
        // jquery1.5之前的写法，对修改开放，扩展封闭
        //  var ajax = $.ajax({
        //       url:"../data/json.txt",
        //       success:function(){
        //           console.log("success1");
        //           console.log("success2");
        //           console.log("success3");
        //       },
        //       error:function(err){
        //           console.log("fail");
        //       }
        //  });
        //  console.log(ajax);// 返回的是一个XHR对象
    
        // jquery 1.5之后的写法,更易于扩展,对扩展开放，每块单独处理
         var ajax = $.ajax("../data/json.txt");
        //  ajax.done(function(){
        //      console.log("successa")
        //  }).fail(function(){
        //      console.log("fail1")
        //  }).done(function(){
        //      console.log("successb")
        //  }).fail(function(){
        //      console.log("fail2")
        //  }).done(function(){
        //      console.log("successc")
        //  }).fail(function(){
        //      console.log("fail3")
        //  })

        // 类似Promise，then(func1成功函数,func2失败函数);
         ajax.then(function(){
            console.log("success 11")
         },function(){
            console.log("fail1")
         }).then(function(){
            console.log("success 12")
         },function(){
            console.log("fail1")
         }).then(function(){
            console.log("success 13")
         },function(){
            console.log("fail1")
         })


    </script>
</body>
</html>