zoukankan      html  css  js  c++  java
  • 异步与闭包与fetch

    异步与闭包与fetch

     

    js是单线程语言,单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

    如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。

    JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。

    于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

    具体来说,异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)

    闭包就是能够读取其他函数内部变量的函数。例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。

    fetch使用

    复制代码
     1 *{
     2             padding: 0px;
     3             margin: 0px;
     4         }
     5         a{
     6             font-size: 18px;
     7             color: rgb(0, 0, 0);
     8             text-decoration: none;
     9             padding: 5px 8px;
    10             background-color: rgb(218, 230, 226);
    11             border-radius: 4px;
    12         }
    13         .title{
    14             margin: 40px auto;
    15              360px;
    16             display: flex;
    17             justify-content: center;
    18             align-items: center;
    19         }
    20         .title span{
    21             margin: 0px 20px;
    22         }
    23         .asd{
    24             max- 960px;
    25             margin: 100px auto;
    26         }
    27         .about{
    28             position: relative;
    29         }
    30         .about{
    31             color: #fff;
    32         }
    33         .about .introuduce{
    34             position: absolute;
    35             left: 60px;
    36             top: 70px;
    37         }
    38         .about .introuduce p{
    39             margin: 10px 0px;
    40         }
    41         .about .introuduce p span{
    42             margin-right: 20px;
    43         }
    44         button{
    45             background-color: #4CAF50;
    46             border: none;
    47             color: white;
    48             padding: 10px 15px;
    49             text-align: center;
    50             text-decoration: none;
    51             display: inline-block;
    52             font-size: 12px;
    53             margin: 4px 2px;
    54             cursor: pointer;
    55         }
    56         .about .mask{
    57              200px;
    58             height: 100%;
    59             left: 0px;
    60             top: 0px;
    61             position: absolute;
    62             background-color: rgba(0, 0, 0, .5);
    63         }
    64         .work{
    65             padding: 4px 8px;
    66             border: 1px solid rgb(255, 126, 40);
    67             background: rgb(255, 126, 40);
    68             border-radius: 6px;
    69         }
    70         .history{
    71             margin: 20px 0px;
    72         }
    73         .template{
    74             display: flex;
    75             margin: 20px 0px;
    76         }
    77         .template .img{
    78             margin-right: 20px;
    79         }
    80         h2{
    81             font-size: 20px;
    82             margin: 10px 0px;
    83         }
    84         h4{
    85             margin: 8px 0px;
    86             font-size: 14px;
    87         }
    88         .template-skill, .template-equ, .equ-main, .template-main, .template-history{
    89             display: none;
    90         }
    91 
    92 
    93         .equ-item{
    94             display: inline-block;
    95              110px;
    96             text-align: center;
    97         }
    复制代码
    复制代码
     1     <div class="asd">
     2         <div class="title">
     3             <a href="https://lol.qq.com/data/info-defail.shtml?id=MissFortune">点击直达官方网页</a>
     4             <span>赏金猎人</span>
     5             <span>厄运小姐</span>
     6         </div>
     7         <div class="about">
     8             
     9         </div>
    10         <div class="history">
    11             
    12         </div>
    13         <div class="skill">
    14             <h2>技能介绍</h2>
    15             
    16         </div>
    17         <div class="zhuangbei">
    18             <h2>推荐装备</h2>
    19             
    20         </div>
    21     </div>
    22 
    23 
    24 
    25     <!-- main-modal -->
    26     <div class="template-main">
    27         <div class="mask"></div>
    28         <div class="introuduce">
    29             <h4>${nickname}</h4>
    30             <h1>${name}</h1>
    31             <p><span class="work" >射手</span></p>
    32             <p><span>物理攻击</span>   ${}</p>
    33             <p><span>魔法攻击</span>   ${}</p>
    34             <p><span>防御能力</span>   ${}</p>
    35             <p><span>上手难度</span>   ${}</p>
    36             <div class="down">
    37                 <button>购买英雄</button>
    38             </div>
    39         </div>
    40         <div class="bgm">
    41             <img src="" alt="">
    42         </div>
    43     </div>
    44 
    45     <!-- 背景故事模板 -->
    46     <div class="template-history">
    47         <h2>背景故事</h2>
    48         <div class="story">
    49             <p>${story}</p>
    50         </div>
    51     </div>
    52     
    53     <!-- 模板 -->
    54     <div class="template-skill">
    55         <div class="img"><img src="" alt="" ></div>
    56         <div class="skill-about">
    57             <h3>${skillName}</h3>
    58             <p>${skillOne}</p>
    59             <p>${skillTwo}</p>
    60         </div>
    61     </div>
    62     <!-- class改为template-equ-box -->
    63     <div class="template-equ">
    64         <div class="start">
    65             <h4>${introduce}</h4>
    66             <div class="content">
    67 
    68             </div>
    69         </div>
    70     </div>
    71     <!-- class改为equ-conten -->
    72     <div class="equ-main">
    73         <div class="item">
    74             <div class="item-top">
    75                 <img src="" alt="" >
    76             </div>
    77             <p>${equName}</p>
    78         </div>
    79     </div>
    复制代码
    复制代码
     1 var temMain = document.getElementsByClassName('template-main')[0].innerHTML
     2         var story = document.getElementsByClassName('template-history')[0].innerHTML
     3         var skill = document.getElementsByClassName('template-skill')[0].innerHTML
     4         var equTemp = document.getElementsByClassName('template-equ')[0].innerHTML
     5         var itemEqu = document.getElementsByClassName('equ-main')[0].innerHTML
     6 
     7         var mainBox = document.getElementsByClassName('about')[0]
     8         var storyBox = document.getElementsByClassName('history')[0]
     9         var skillBox = document.getElementsByClassName('skill')[0]
    10         var equBox = document.getElementsByClassName('zhuangbei')[0]
    11 
    12 
    13         var templateString = ""
    14 
    15 
    16         // var asd = new XMLHttpRequest()
    17         var reqUrl = "https://curtaintan.github.io/tan/a.json"
    18         // asd.open( 'GET', reqUrl, true )
    19         // asd.responseType = 'json'
    20         // asd.send()
    21         // asd.onload = function(){
    22         //     var res = asd.response
    23         //     console.log(res)
    24         //     show( res )
    25         // }
    26 
    27 
    28 
    29         fetch( reqUrl ).then( res => {
    30             return handleResponse( res )
    31         }).then( res => {
    32             console.log( res )
    33             show( res )
    34         } )
    35 
    36 
    37 
    38         //返回数据类型转换
    39         function handleResponse( res ){
    40             let contentType = res.headers.get('content-type')
    41             console.log( contentType )
    42             if( contentType.includes('application/json' ) ){                    //json格式
    43                 console.log('-------------数据是json---------------')
    44                 return res.json()
    45             }else if( contentType.includes('application/json' )){               //xml和文本格式
    46                 console.log('-------------数据不是json---------------')
    47                 return res.text()
    48             }
    49         }
    50 
    51 
    52 
    53 
    54         function show ( data ){
    55             //替换main
    56             templateString =  temMain.replace("${nickname}", data.nickName)
    57             .replace("${name}", data.name)
    58             .replace('src=""', 'src="'+ data.headImg +'"')
    59             .replace('${}', data.attr.物理攻击 )
    60             .replace('${}', data.attr.魔法攻击 )
    61             .replace('${}', data.attr.防御能力 )
    62             .replace('${}', data.attr.上手难度 )
    63             mainBox.innerHTML = templateString
    64 
    65 
    66             //替换故事
    67             templateString = story.replace( '${story}', data.story )
    68             storyBox.innerHTML = templateString
    69 
    70 
    71             //替换技能
    72             for( let i = 0; i < data.skill.length; i ++ ){
    73                 templateString = skill.replace( 'src=""', 'src="'+ data.skill[i].image +'"' )
    74                 .replace( '${skillName}', data.skill[i].name )
    75                 .replace( '${skillOne}', data.skill[i].introduce)
    76                 .replace( '${skillTwo}', data.skill[i].twointroduce)
    77                 let ss = document.createElement('div')
    78                 ss.classList.add('template')
    79                 ss.innerHTML = templateString
    80                 skillBox.appendChild( ss )
    81             }
    82 
    83 
    84             //替换装备
    85             for( let i = 0; i < data.equipment.length; i ++ ){
    86                 templateString = equTemp.replace( "${introduce}", data.equipment[i].introduce )
    87                 let ss = document.createElement('div')
    88                 ss.innerHTML = templateString
    89                 for( let j = 0; j < data.equipment[i].equ.length; j ++ ){
    90                     templateString = itemEqu.replace('${equName}', data.equipment[i].equ[j].name)
    91                     .replace( 'src=""', 'src="'+ data.equipment[i].equ[j].image +'"' )
    92                     var son = document.createElement('div')
    93                     son.classList.add('equ-item')
    94                     son.innerHTML = templateString
    95                     ss.appendChild( son )
    96                 }
    97                 equBox.appendChild( ss )
    98             }
    99         }
    转自十二月出行的博客>>>>https://www.cnblogs.com/curtain473/p/10049392.html
  • 相关阅读:
    poj 2584 T-Shirt Gumbo (二分匹配)
    hdu 1757 A Simple Math Problem (乘法矩阵)
    矩阵之矩阵乘法(转载)
    poj 2239 Selecting Courses (二分匹配)
    hdu 3661 Assignments (贪心)
    hdu 1348 Wall (凸包)
    poj 2060 Taxi Cab Scheme (二分匹配)
    hdu 2202 最大三角形 (凸包)
    hdu 1577 WisKey的眼神 (数学几何)
    poj 1719 Shooting Contest (二分匹配)
  • 原文地址:https://www.cnblogs.com/Jakeyang/p/10060112.html
Copyright © 2011-2022 走看看