Windows对象-优快云博客

本文链接：https://blog.youkuaiyun.com/axinxinxinl/article/details/144652373

1.BOM是浏览器对象模型

2.定时器——延时函数

定时器大致分为延时和间歇两种，都是回调函数，以毫秒为单位，返回值都是数字型的id，表示第几个计时器

区别：

延时函数只执行一次

间歇函数每隔一段时间就会执行一次，除非手动清除

// 延时函数
    setTimeout(function () {
      console.log('11')

    }, 2000)
    // 间歇函数
    setInterval(function () {
      console.log(22)

    }, 1000)

案例：5秒后自动关闭广告

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 100px;
      background-color: palegoldenrod;
    }
  </style>
</head>

<body>
  <div>广告</div>
  <script>
    //获取元素
    let div = document.querySelector('div')
    //开定时器
    setTimeout(function () {
      div.style.display = 'none'
    }, 5000)
  </script>
</body>

</html>

3.JS执行机制

结果均是1,3,2

原因：

解决方法

引入同步和异步

异步利用浏览器处理

同步就是流水线，必须完成上一个任务才能进行下一个

异步：在进行某个任务的同时也进行另一个任务

执行循序

先执行执行栈种的同步事件，异步任务先放到任务队列中，当同步任务执行完毕后再执行异步任务，所以setTimeout 所在语句最后执行

事件循环

4.location对象

location的数据类型是对象，拆分并保存了URL地址的各个部分。

href属性

得到完整的URL地址

对其赋值则常用于自动跳转页面

location.href = 'http://www.baidu.com'

案例：5秒后不点击就自动跳转

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      color: red;
    }
  </style>
</head>

<body>
  <a href="http://www.baidu.com"><span>5</span>秒之后自动跳转</a>
  <script>
    //获取元素
    const a = document.querySelector('a')
    //开启定时器
    //声明定时器变量
    let num = 5
    let timerId = setInterval(function () {
      num--
      a.innerHTML = `<span>${num}</span>秒之后自动跳转`
      //如果num===0，关闭定时器，并实现自动跳转
      if (num === 0) {
        clearInterval(timerId)
        //跳转
        location.href = 'http://www.baidu.com'
      }
    }, 1000)
  </script>
</body>

</html>