Js查漏补缺-12

0x00 window对象(续)

     清除定时器-clearInterval()

  <button class="btn-start">开始定时器</button>
  <button class="btn-stop">停止定时器</button>
  <script>
    let start = document.querySelector('.btn-start');
    let stop = document.querySelector('.btn-stop');
    let timer = null;
    start.addEventListener('click',() => {
      timer = setInterval(() => {
        console.log("一秒过去了");
      },1000);
    })
    stop.addEventListener('click',() => {
      clearInterval(timer);
    })
  </script>

    简单的禁用按钮示例

  <div class="content">
    手机号码 <input type="number" appearance="none"> <button class="btn-send">发送</button>
  </div>
  <script>
    let btn = document.querySelector('.btn-send');
    let timer = null;
    btn.addEventListener('click',() => {
      let time1 = 10;
      btn.disabled = true;
      timer = setInterval(() => {
        if(time1){
          btn.innerHTML = time1 + "秒后可重新发送";
          time1--;
        }else{
          clearInterval(timer);
          btn.innerHTML = "发送";
          btn.disabled = false;
        }
      },1000);
    })
  </script>

0x01 Js执行队列

    示例1:

    console.log(1);
    setTimeout(() => {
      console.log(2);
    },1000)
    console.log(3);

    可以看到这里输出的是132,这是因为Js在执行到setTimeout时创建了一个新的线程来处理setTimeout,这是Js的异步机制

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

   将setTimeout的时间设为0,可以看到这里输出的还是132.要解决这个问题,首先需要了解Js的执行机制,Js将任务分为同步任务和异步任务.同步任务运行在主线程上,形成一个执行栈,异步任务一般通过回调函数实现,一般来说异步任务包括定时器(setTimeout等),普通事件(click等),资源加载(load等),而这些的回调函数放入异步的消息队列中,注意,只有回调函数加入消息队列.

    而Js的执行顺序是先执行主线程执行栈的所有任务,遇到异步任务则将回调函数加入异步消息队列.待主线程执行栈所有同步任务执行完了再按照顺序执行异步消息队列中的回调函数.

    在这个案例中,主线程执行栈中第一个console.log(1),第二个为setTimeout(fn,0);fn为箭头函数,第三个为console.log(3),而异步的消息队列中则是() => {console.log(2);},很显然按照Js的执行顺序输出就是132.

    当有多个异步任务时,当主线程执行栈遇到异步任务,其实是将其发送给Js的异步进程处理器,而Js的异步处理器在条件满足时才将回调函数写入消息队列.如下例子所示,主线程执行栈执行完了便打印了13,当过了两秒后,异步处理器将setTimeout的回调函数写入消息队列,此时打印4,而当点击时,异步处理器将onclick的回调函数写入消息队列,于是打印2.

    由于主线程不断的获取任务,执行任务,再获取任务,这种机制被称为事件循环.

    console.log(1);
    document.onclick = () => {
      console.log(2);
    }
    console.log(3);
    setTimeout(() => {
      console.log(4);
    },2000)

0x02 location对象

    location是存储页面url信息的对象

    console.log(location.href); // 获取完整的URL
    console.log(location.host); // 获取域名
    console.log(location.port); // 获取端口
    console.log(location.pathname); // 获取路径
    console.log(location.search); // 获取参数
    console.log(location.hash); // 获取片段（常用于获取锚点）

    示例:五秒钟后自动跳转页面

  <div class="content">
    该页面未找到，将在5秒后自动跳转
  </div>
  <script>
    let div = document.querySelector('.content');
    let time = 5;
    setInterval(() => {
      if(time){
        div.innerHTML = "该页面未找到，将在" + time + "秒后自动跳转";
        time--;
      }else{
        location.href = "https://www.bilibili.com"
      }
    },1000)
  </script>

    三个location对象的常用方法

    location.assign('https://www.bilibili.com'); // 跳转页面，记录历史，可以使用回退键返回上一个页面
    location.replace('https://www.bilibili.com'); // 跳转页面，但不记录历史
    location.reload(); // 重新加载页面,若参数为true，则相当于ctrl+f5

0x03 navigator对象

    navigator对象储存了浏览器的信息,最常用的属性为user-agent

    常用的页面判断代码

    if ((navigator.userAgent.match(/(phone|pad|pod|iphone|iPod|ios|ipad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOsBrowser|BrowserNG|Webos|Symbian|windows Phone)/i))) {
      window. location.href = ""; // 手机
    }else{
      window. location.href = ""; // 电脑
    }

0x04 history对象

    history对象与浏览器历史进行交互,该对象包括了用户访问过的url

    history.forward(); // 前进一个页面
    history.back(); // 后退一个页面
    history.go(); // 参数为1则前进一个页面，参数为-2则后退两个页面