BOM（二）：同步和异步、location对象、navigator对象、history对象

一、JS的执行机制

1.同步和异步

js是单线程的，也就是同一时间只能做一件事，为了防止下一个任务等上一个太长时间，产生了js同步和异步。

同步：一个任务完成再去做下一个任务

异步：可以同时做多个任务，如果上一个任务需要的时间长就可以先做下一个任务

console.log(1);
setTimeout(function () {
    console.log(3);
}, 0);
console.log(2);

这段代码的执行结果是1 2 3，为啥呢？（0的意思是立马执行）

先执行执行栈中的同步任务；异步中放的都是回调函数，放入任务队列中

2.JS的执行机制

二、location对象

1.URL

用于获取或设置窗体的url

2.location

重点记住href和search

案例：五秒后跳转网页

<script>
        var btn=document.querySelector('button');
        var t=5;
         setInterval(function(){
             if(t==0)
             {
                location.href='http://www.baidu.com';
             }
             else{
                 btn.innerHTML='还有'+t+'s自动为您跳转';
                 t--;
             }
         },1000)

案例：获取url参数数据(实现不同页面之间的数据传递）

login

<form action="index.html">
        <p>登陆页面</p>
    <div>用户名：
        <input type="text" name="uname">
        <button>登陆</button>
    </div>
    </form>

index

<p>首页</p>
    <div></div>
    <script>
        var div=document.querySelector('div');
        var name = location.search.substr(1);
    //先把？去掉  (strat,截几个)第二个参数如果不写，默认是取到最后一个
    var arr = name.split('='); //利用split分割为数组
    console.log(arr); //['uname', 'hhh']
        div.innerHTML='你好!'+arr[1];
    </script>

3.location对象的方法

assign记录我们的网页所以可以后退

reload（）就行，为空或者false就是刷新当前页面，填参数的话就是强制刷新，就是不用电脑中的缓存，都给我重新加载

三、navigator对象

知道用户到底用pc还是移动端打开的界面

四、history对象

<button>前进</button>
    <script>
        var btn=document.querySelector('button');
        btn.onclick=function(){
            history.back();
        }
      
    </script>