JavaScript WebAPI学习 demo7_webapi异步运行两个定时器-CSDN博客

本文链接：https://blog.csdn.net/weixin_46170034/article/details/106130017

这篇笔记详细介绍了JavaScript中的BOM浏览器对象模型，重点讲解了window对象的事件、定时器（setTimeout和setInterval）的使用，包括自动关闭广告和倒计时案例，还涉及this指向、同步与异步执行机制以及location对象的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript WebAPI学习

这篇笔记主要讲了窗口大小事件，两种定时器，this指向得问题，和刷新，获取URL等属性得方法，js同步和异步
初学者写下得笔记，如有错误，欢迎前来指正

BOM浏览器对象模型

BOM：浏览器对象模型，例如刷新，后退等操作
BOM 兼容性较差
BOM顶级对象是 window
BOM 浏览器窗口进行交互的一些对象

window 对象

BOM构成：

在这里插入图片描述

他是 js 访问浏览器窗口的一个接口
他是一个全局对象，定义在全局作用域中的变量或者函数都会变成 window 对象的属性和方法 (在调用时可以省略window)
alert 也是 window 的方法，完整写法 (window.alert)
window 下面有一个特殊属性 window.name (所以声明变量时不要用 name 作为变量名，即使他不是关键字)

window 对象常用事件

窗口加载事件：window.onload = function() {} 或者 window.addEventListener('load',function() {})
窗口加载事件是在文档内容完全加载后在调用这个事件
使用场景：之前的 script 必须写在网页的最下面，这里我们可以把原来的代码放在这个事件里，我们就可以随心所欲的把 script标签移动到任何地方
传统的 window.onload 只能写一次，否则后面的会把前面的覆盖掉，所以推荐window.addEventListener方式

窗口加载事件：document.addEventListener('DOMcontentLoaded',function() {})
DOMcontentLoaded 在DOM加载完成触发，不包括样式表(css)，图片，flash等
兼容性：IE9以上支持
因为不需要等到加载图片等就可以完成，所以速度要比 onnload 快

调整窗口大小事件

调整窗口大小事件：window.onresize 或者 window.addEventListener('resize',function() {})
当窗口大小发生改变时就触发这个事件
应用于响应式布局
window.innerWidth 获取当前屏幕宽度，和上面来一起使用，应用于响应式布局

定时器

定时器分为两种 setTimeout() 和 setInterval()

定时器之 setTimeout()

使用格式：window.setTimeout(调用函数, [延迟的毫秒数])
在延迟毫秒数之后调用函数
window 在使用时可以省略
代码示例：

// 2秒钟后调用前面的 function 函数
setTimeout(function() {}, 2000);
// 还有一种写法 (不提倡)
setTimeout('函数名()', 3000);

一个页面上可能有多个不同的定时器，为了区分他们，我们给定时器加标志符

// 现在就有两个不同的定时器
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);

回调函数

正常函数都是根据代码顺序进行的，回调函数是运行到某个地方，回头调用这个函数
例如计时器里的函数，或者注册事件里的函数都是回调函数

案例：自动关闭的广告

打开页面显示一个广告，5秒后自动关闭广告
代码示例：

<style>
  .Ad {
    height: 200px;
    width: 200px;
    background-color: pink;
    text-align: center;
    line-height: 200px;
    font-size: 25px;
    font-weight: 700;
  }
</style>
<body>
  <div class="Ad">我是广告！</div>
  <script>
    var Ad = document.querySelector('.Ad');
    function disable() {
        Ad.style.display = 'none';
    }
    setTimeout(disable, 5000);
  </script>
</body>

停止定时器 (clserTimeout)

把这个定时器停止掉
使用方法：window.clearTimeout(timeoutID)
代码示例：

var timer = setTimeout(function() {},1024);
clearTimeout(timer);

定时器之 setInterval()

使用格式：window.setInterval(回调函数,[间隔毫秒数])
setInterval 是每隔这个时间就调用一次回调函数
和上面的函数的基本操作是一样的
代码示例：

setInterval(function() {
  console.log('每隔一秒我输出一次');
},1000);

定时器案例：倒计时

实现一个类似于京东倒计时秒杀的效果
大概思路就是有一个函数计算当前时间和我们倒计时时间的差的函数，然后每隔 1 秒就进行一次刷新，就会出现倒计时的效果
代码示例：

<style>
  ul li {
    list-style: none;
    height: 50px;
    width: 50px;
    background-color: black;
    float: left;
    margin-left: 20px;
    font-size: 20px;
    color: aliceblue;
    text-align: center;
    line-height: 50px;
  }
</style>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    var lis = document.querySelectorAll('li');
    var inputTime = +new Date('2020-5-9 18:00:00');
    // 之前调用一次，防止第一次刷新页面有空白
    countDown();
    setInterval(countDown, 1000);
    function countDown() {
      var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
      var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
      var h = parseInt(times / 60 / 60 % 24); //时
      h = h < 10 ? '0' + h : h;
      lis[0].innerHTML = h; // 把剩余的小时给 小时黑色盒子
      var m = parseInt(times / 60 % 60); // 分
      m = m < 10 ? '0' + m : m;
      lis[1].innerHTML = m;
      var s = parseInt(times % 60); // 当前的秒
      s = s < 10 ? '0' + s : s;
      lis[2].innerHTML = s;
    }
  </script>
</body>

停止定时器：clearInterval

使用方法：window.clearInterval(intervalID)
intervalID 是定时器的名字
注意变量作用域的问题，想要提升变量的作用域，可以定义一个同名全局变量并赋初值为 null

var timer = setInterval(function() {},1024);
clearInterval(timer);

发送验证码后倒计时效果

点击按钮后禁用disable为true
上面只要有一个按钮就可以

// 倒计时 5 秒
var time = 5;
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
  btn.disabled = true;
  var timer = setInterval(function () {
    time--;
    btn.innerHTML = '还剩' + time + '秒后重试';
    // 时间为 0 后，清除定时器，复原按钮
    if (time == 0) {
      clearInterval(timer);
      btn.innerHTML = '发送验证码';
      btn.disabled = false;
      time = 5;
    }
  }, 1000);
})

this指向问题

this指向调用它的对象
全局作用下this指向全局对象 window (定时器里的 this 也指向 window)
方法中谁调用这个函数 this 指向谁
例如：

var o = {
    sayhi: function () {
        console.log(this);
    }
}
o.sayhi();

这里的 this 指向 o

构造函数里的 this 指向实例化的对象 fun

function Fun() {
  console.log(this);
}
var fun = new Fun();

JS同步和异步

JS 是单线程语言，为了防止一个线程占用系统资源过多，系统允许 JS 创建多个线程，JS里就出现了同步和异步
同步：上一个任务结束后才能执行下一个任务
异步：可以同时进行多个任务
异步实例：

console.log(1);
setTimeout(function () {
    console.log(2);
}, 1000);
console.log(3);
// 输出：1 3 2

正常同步的话应该输出1 2 3
但是异步的话输出的就是 1 3 2，因为 2 所需要的时间长，所以 JS 会先执行 log(3)

同步异步执行过程

js把所有任务分成同步任务和异步任务
同步任务放在主线程上执行栈里执行
异步任务是通过回调函数实现的
异步任务包括：
- 普通事件：click，resize等
- 资源加载：load，error等
- 定时器：setInterval，setTimeout

JS执行机制

先执行同步任务，碰到回调函数把函数放到任务队列里，然后主线程执行完后再去执行任务队列
多个异步任务时，会有一个叫异步进程处理的东西来处理事件
- 比如一个onclick事件，异步进程处理就会等待鼠标点击，鼠标点击后再把函数放入任务队列，然后执行这个函数
- 例如一个计时器(setTimeout)，异步进程处理就会等待几秒后然后再把函数放入任务队列中
事件循环：主线程不断向任务队列中放入事件，执行事件的情况

location 对象

location 对象用于获取或者设置窗体的URL
返回的是一个对象
URL 语法格式：
location 对象的属性：

location 对象的属性	返回值
location.herf	获取或者设置整个URL
location.host	返回主机域名
location.port	返回端口号，若没有则返回空字符串
location.pathname	返回路径
location.search	返回参数重要
location.hash	返回片段 (#后面的内容) 常见于链接锚点

location对象实例：5秒后跳转页面

点击按钮跳转到百度的页面
代码示例：

var timer = 5;
setInterval(function() {
  div.innerHTML = '您将在' + timer + '跳转';
  timer--;
  if(timer==0) location.herf = 'https://www.baidu.com';
},1000);

location对象实例：不同页面之间传递参数

使用URL里面的location.search参数来传递表单参数
第一个页面：登陆页面login.html

<body>
    <form action="index.html">
        用户名：<input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

第二个页面：index.html

console.log(location.search);
// 获取的值是带问号的参数，下面需要剪切字符串
// substr('起始的位置',截取几个字符) 第二个参数没有的话默认截到末尾
var str = location.search.substr(1);
// 下面利用等号 = 分割为数组
// split('=')
var arr = str.split('=');
alert('欢迎' + arr[1] + '登录');

location对象常见方法

location 对象的方法	返回值
location.assign()	和herf一样可以跳转页面 (可以后退)
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面相当于刷新按钮，如果参数为 true 则强制刷新 (ctrl+F5)

navigator 对象

获取浏览器信息
主要是里面的 userAgent 属性，可以看到浏览器得情况
可以通过里面的信息来判断应该打开电脑端页面还是手机端页面

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    window.location.href = "https://www.baidu.com/";
} else {
    window.location.href = "http://news.baidu.com/";
}

history 对象

history 对象	返回值
history.back()	实现后退功能
history.forward()	前进功能
history.go(参数)	前进后退功能，参数为 1 前进一个页面，参数为 -1 后退一个页面