目录

1，setTimeout
2，一个简单的动画
3，异步
4，callback (promiss是callback的优化)

1，setTimeout

用法：全局函数

  //timeId是返回值，编号
 var timeId=setTimeout(function(){console.log('1')})
 //'liu'传给xxx
 var timeId=setTimeout(function(xxx){console.log(xxx)},2000,'liu')

特点：
1）function一定是异步执行

图片.png

答案：B

先写的代码后执行，后写的代码先执行，很可能是异步

图片.png

function一定是异步执行

2）那，看下面，1秒时间，下面的function会被执行多少次：

   //setInterval每隔指定时间执行一次函数
   setInterval(function(){console.log(1)},0)

一般来想一秒执行很多次，但是实际上，浏览器最小控制时间4ms，再快它就不接受了，IE最小控制时间15ms

各浏览器的delay最小值不同

3）最后理解：

图片.png

使用setTimeout模拟setInterval

你真的不需要使用setInterval

  setTimeout(function xxx(){
          var date=new Date()
         console.log(date.toString())
       //过了1s再执行xxx函数
         setTimeout(xxx,1000)
    },1000)

知识点

1）特别注意func和func()的区别：

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

func 只是一个函数，没有执行的函数，同函数声明一样
func() 是在执行函数，他一定有返回值

2）具名函数名的作用域

图片.png

2，一个简单的动画

动画原理：
一秒内不断变化

    var box=document.querySelector('.box')
    move(box,0,300,3000)
    function move(el,start,end,time){
      //1S运行10次
      //下面是总时间里面运行的总次数
      var stepcount=time/1000*10
      //每次运行的时间
      var onesteptime=time/stepcount
      el.style.left=start+'px'
     //记录运行到第几步了
      var step=0
      setTimeout(function xxx(){
        step+=1
        el.style.left=step/stepcount*(end-start)+'px'
     //移完了
        if(step===stepcount){
          
        }else{
           setTimeout(xxx,onesteptime)
        }
      },onesteptime)
      
    }

那么动画完成怎么办呢？怎么通知外面动画结束了
可以：

图片.png

显然是不行的，因为setTimeout的执行会被挂起
动画还没执行完，'结束'就已近打印出来了
那么怎么办呢？
解决办法：
只能通过，动画结束的标志，调用一个传进来的函数，这个函数的输出结果在外面显示

    var box=document.querySelector('.box')
    console.log('开始')
    move(box,0,300,3000,function(){
      console.log('真结束')
    })
    console.log('结束')
    function move(el,start,end,time,fn){
      //1S运行10次
      //下面是总时间里面运行的总次数
      var stepcount=time/1000*10
      //每次运行的时间
      var onesteptime=time/stepcount
      el.style.left=start+'px'
      
     //记录运行到第几步了
      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

总结：

1，setTimeout不是JS的功能，他是浏览器的功能，JS本身没有这个全局变量，这是浏览器提供给JS的API,所以他不算是JS的功能，浏览器给JS的功能，闹钟不是在JS里面的，这个闹钟是在浏览器里面的

2，setTimeout里面的this是什么？

图片.png

图片.png

3，time id是什么？
闹钟的编号，99个闹钟，你要关闭一个，这时候就需要闹钟的一个编号

3，异步

图片.png

模式 => pattern=>套路

图片.png

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

JS里面到处都是异步

例子：
1，监听异步

图片.png

图片.png

在JS里只有操作DOM不是异步，但是现在有些框架react vue已经让DOM变成异步

图片.png

靠别人：

1，setTimeout的异步借助了浏览器的闹钟
2，AJAX是XMLHttpRequest API的一个接口,完全是由浏览提供给JS的功能

图片.png

说明什么？
JS引擎在同一时间只能做一件事情

图片.png

图片.png

图片.png

异步ajax没有返回值，但是它会有一个结果，可以利用这个结果传参给callback函数