目錄

1牲平，setTimeout
2，一個(gè)簡(jiǎn)單的動(dòng)畫
3朋蔫，異步
4测垛，callback (promiss是callback的優(yōu)化)

1捏膨，setTimeout

用法：全局函數(shù)

  //timeId是返回值，編號(hào)
 var timeId=setTimeout(function(){console.log('1')})
 //'liu'傳給xxx
 var timeId=setTimeout(function(xxx){console.log(xxx)},2000,'liu')

特點(diǎn)：
1）function一定是異步執(zhí)行

圖片.png

答案：B

先寫的代碼后執(zhí)行食侮，后寫的代碼先執(zhí)行脊奋，很可能是異步

圖片.png

function一定是異步執(zhí)行

2）那，看下面疙描，1秒時(shí)間诚隙，下面的function會(huì)被執(zhí)行多少次：

   //setInterval每隔指定時(shí)間執(zhí)行一次函數(shù)
   setInterval(function(){console.log(1)},0)

一般來想一秒執(zhí)行很多次，但是實(shí)際上起胰，瀏覽器最小控制時(shí)間4ms久又，再快它就不接受了巫延，IE最小控制時(shí)間15ms

各瀏覽器的delay最小值不同

3）最后理解：

圖片.png

使用setTimeout模擬setInterval

你真的不需要使用setInterval

  setTimeout(function xxx(){
          var date=new Date()
         console.log(date.toString())
       //過了1s再執(zhí)行xxx函數(shù)
         setTimeout(xxx,1000)
    },1000)

知識(shí)點(diǎn)

1）特別注意func和func()的區(qū)別：

setTimeout(xxx(),1000)
拆：
var result=xxx() //返回值：1，'sssss'地消，true
setTimeout(result,1000)

func 只是一個(gè)函數(shù)炉峰，沒有執(zhí)行的函數(shù)，同函數(shù)聲明一樣
func() 是在執(zhí)行函數(shù)脉执，他一定有返回值

2）具名函數(shù)名的作用域

圖片.png

2疼阔，一個(gè)簡(jiǎn)單的動(dòng)畫

動(dòng)畫原理：
一秒內(nèi)不斷變化

    var box=document.querySelector('.box')
    move(box,0,300,3000)
    function move(el,start,end,time){
      //1S運(yùn)行10次
      //下面是總時(shí)間里面運(yùn)行的總次數(shù)
      var stepcount=time/1000*10
      //每次運(yùn)行的時(shí)間
      var onesteptime=time/stepcount
      el.style.left=start+'px'
     //記錄運(yùn)行到第幾步了
      var step=0
      setTimeout(function xxx(){
        step+=1
        el.style.left=step/stepcount*(end-start)+'px'
     //移完了
        if(step===stepcount){
          
        }else{
           setTimeout(xxx,onesteptime)
        }
      },onesteptime)
      
    }

那么動(dòng)畫完成怎么辦呢？怎么通知外面動(dòng)畫結(jié)束了
可以：

圖片.png

顯然是不行的半夷，因?yàn)閟etTimeout的執(zhí)行會(huì)被掛起
動(dòng)畫還沒執(zhí)行完婆廊，'結(jié)束'就已近打印出來了
那么怎么辦呢？
解決辦法：
只能通過巫橄，動(dòng)畫結(jié)束的標(biāo)志淘邻，調(diào)用一個(gè)傳進(jìn)來的函數(shù)，這個(gè)函數(shù)的輸出結(jié)果在外面顯示

    var box=document.querySelector('.box')
    console.log('開始')
    move(box,0,300,3000,function(){
      console.log('真結(jié)束')
    })
    console.log('結(jié)束')
    function move(el,start,end,time,fn){
      //1S運(yùn)行10次
      //下面是總時(shí)間里面運(yùn)行的總次數(shù)
      var stepcount=time/1000*10
      //每次運(yùn)行的時(shí)間
      var onesteptime=time/stepcount
      el.style.left=start+'px'
      
     //記錄運(yùn)行到第幾步了
      var step=0
      setTimeout(function xxx(){
        step+=1
        el.style.left=step/stepcount*(end-start)+'px'
        if(step===stepcount){
          fn()
        }else{
           setTimeout(xxx,onesteptime)
        }
      },onesteptime)
      
    }

圖片.png

總結(jié)：

1湘换，setTimeout不是JS的功能宾舅，他是瀏覽器的功能，JS本身沒有這個(gè)全局變量彩倚，這是瀏覽器提供給JS的API,所以他不算是JS的功能筹我，瀏覽器給JS的功能，鬧鐘不是在JS里面的帆离，這個(gè)鬧鐘是在瀏覽器里面的

2崎溃，setTimeout里面的this是什么？

圖片.png

圖片.png

3盯质，time id是什么？
鬧鐘的編號(hào)概而，99個(gè)鬧鐘呼巷，你要關(guān)閉一個(gè)，這時(shí)候就需要鬧鐘的一個(gè)編號(hào)

3赎瑰，異步

圖片.png

模式 => pattern=>套路

圖片.png

AJAX=>Asynchronism Javascript And Xml
AJAJ=>Asynchronism Javascript And Json

JS里面到處都是異步

例子：
1王悍，監(jiān)聽異步

圖片.png

圖片.png

在JS里只有操作DOM不是異步，但是現(xiàn)在有些框架react vue已經(jīng)讓DOM變成異步

圖片.png

靠別人：

1餐曼，setTimeout的異步借助了瀏覽器的鬧鐘
2压储，AJAX是XMLHttpRequest API的一個(gè)接口,完全是由瀏覽提供給JS的功能

圖片.png

說明什么？
JS引擎在同一時(shí)間只能做一件事情

圖片.png

圖片.png

圖片.png

異步ajax沒有返回值源譬，但是它會(huì)有一個(gè)結(jié)果集惋，可以利用這個(gè)結(jié)果傳參給callback函數(shù)