【干货分享建议收藏】1w字搞定BOM_请叫我阿ken csdn

2401_84138835

于 2024-05-01 03:26:58 发布

阅读量291

点赞数 22

分类专栏：程序员文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_84138835/article/details/138362600

版权

程序员专栏收录该内容

145 篇文章 2 订阅

订阅专栏

方法	说明
setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按照指定的周期(以毫秒计)来调用函数成执行一段代码
clearTimeout()	取消由 setTimeout() 方法设置的定时器
clearlnterval()	取消由 setInterval() 设置的定时器

上述表中，setTimeout() 和 setInterval() 方法都可以在一个固定时间段内执行代码，不同的是前者只执行一次代码，而后者会在指定的时间后自动重复执行代码。

在实际开发中，我们可以通过 setTimeout() 方法实现函数的一次调用，并且可以通过 clearTimeout() 来清除 setTimeout() 定时器。

setTimeout() 和 setInterval() 的语法格式如下：

setTimeout(调用的函数，[延迟的毫秒数])
setInterval(调用的函数，[延迟的毫秒数])

在上述语法中，第 1 个参数表示到达第 2 个参数设置的等待时间后要执行的代码，也可以传入一个函数，或者函数名，第 2 个参数的时间单位以毫秒 (ms) 计。

案例：以 setTimeout() 为例进行代码演示，

// 参数形式1: 用字符串表示一段代码
setTimeout('alert("JavaScript");', 3000);

// 参数形式2: 传入一个匿名函数
setTimeout(function() {
alert('JavaScript');
}, 3000);

// 参数形式3: 传入函数名
setTimeout(fn, 3000);
function fn() {
console.log('JavaScript');
}

在上述代码中，当参数为一个函数名时，这个函数名不需要加 () 小括号，否则就变成立即执行这个函数，将函数执行后的返回值传入。如果延迟的毫秒数省略时，默认为0。

在实际开发中，考虑到一个网页中可能会有很多个定时器，所以建议用一个变量保存定时器的id（唯一标识）。若想要在定时器启动后，取消该定时器操作，可以将 setTimeout() 的返回值（定时器id）传递给 clearTimeout() 方法。

// 在设置定时器时，保存定时器的唯一标识
var timer = setTimeout(fn, 3000);

// 如果要取消定时器，可将唯一标识传递给 clearTimeout() 方法
clearTimeout(timer);

8.3.2 [ 案例 ] 3 秒后自动关闭广告

本案例将会使用 setTimeout() 实现3秒后自动关闭广告的效果，具体代码如下：

<body>
<script>

console.log ('广告显示');
var timer = setTimeout(fn, 3000);
function fn() {
console.log('广告关闭了');
}

</script>
</body>

在这里插入图片描述

上述代码中，代码定义了一个 timer 变量用于保存setTimeout 定时器，定时器的功能为 3000ms 后执行 fn 函数。代码定义处理函数 fn，并打印 " 广告关闭了 "。

8.3.3 [案例] 60秒内只能发送一次短信

本案例将会利用 setInterval() 和 clearInterval() 方法完成一个发送短信的案例，要求60秒内只能发送一次短信。其开发思路为，在页面中放一个文本框和一个 " 发送 " 按钮，在文本框中输人手机号码，然后单击 " 发送 " 按钮，就可以发送短信，但是短信发送后，该按钮在 60 秒以内不能再次点击，防止重复发送请求短信。并且在按钮单击之后，按钮上的文字会变为 " 还剩x秒再次单击 " 。

具体代码如下：

<body>

手机号码: 
<input type="number"> <button>发送</button>

<script>
var btn = document.querySelector('button');
var time = 60; // 定义剩下的秒数
btn.addEventListener('click', function() {
btn.disabled = true;
var timer = setInterval (function() {
if(time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
} else {
btn.innerHTML = ' 还剩下 ' + time + '秒';
time--;
}
}, 1000);
} );

</script>
</body>

在这里插入图片描述

上述代码中，代码定义了剩下的秒数。给按钮绑定单击事件，按钮被单击之后在第7行将 disabled 属性设置为 true 可以禁用按钮。按钮里面的内容需要变化，所以在 else 中通过 innerHTML 修改按钮内容，并且在第 15 行设置 time 变量不断递减。如果 time 为 0，执行 if 语句，停止定时器，复原按钮初始状态。

多学一招: this指向问题
_
this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定 this 到底指向谁。一般情况下 this 的最终指向的是调用它的对象。为了使读者更好地理解，下面我们通过3个具体的场景来讲解 this 的指向问题。
(1) 在全局作用域或者普通函数中，this 指向全局对象window。示例代码如下：

console.log(this); // this指向的是window

function fn() {
console.log (this);
}

window.fn();
// this 指向的是window

在定时器方法的第 1 个参数的函数中，this 指向的也是 window 对象。

(2) 在方法中，谁调用的方法，this 就指向谁。示例代码如下：

var o = {

sayHi: function() {
console.log(this);
}

};
o.sayHi(); // sayHi中的this指向的就是o这个对象

(3) 构造函数中的 this 指向的是新创建的实例。示例代码如下：

function Fun() {
console.log(this);
}

var fun = new Fun();
// Fun中的this指向的是新创建的实例，即fun

8.4 JavaScript 执行机制

JavaScript 的定时器可以完成一些异步操作。例如，同时设置多个定时器，每个定时器都在3秒后执行一段代码，则三秒后，这些定时器中的代码都会执行。JavaScript 的定时器虽然没有 Java 中的多线程那样强大，但在开发中也能满足大部分的需求。

本节将针对 JavaScript 的执行机制进行讲解

8.4.1 单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 JavaScript 这门脚本语言诞生的使命所致，即 JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如，对某个 DOM 元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题是，如果 Javascript 执行的时间过长，就会造成页面的渲染不连贯，导致页面渲染加载有阻塞的感觉。

案例：演示，

console.log(1);

setTimeout(function() {
console.log(3);
}, 5000);

console.log(2);

执行上述代码，在控制台会看到程序先输出了1、2，等待 5 秒后输出 3。由此可见，当调用setTimeout() 方法后，该方法会立即执行完成，然后执行后面的代码，在控制台中输出 2。而为 setTimeout() 传入的函数，它会在 5 秒后执行。像这样的操作就称为异步操作。这个异步执行的函数称为回调函数，它的调用时机是由定时器来决定的。

8.4.2 同步和异步

为了更好地利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是 JavaScript 出现了同步和异步的概念。

所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法，烧水煮饭，等水开了之后，再去切菜，炒菜。
所谓异步，就是在做一件事件的同时，可以去处理其他的事情。还以做饭为例，异步做法是，在烧水煮饭的同时去切菜炒菜。

同步任务都是在主线程上执行的，会形成一个执行栈，而异步任务是通过回调函数实现的，一般来说，异步任务有 3 种类型，第 1 种是普通事件，如 click、resize 等；第 2 种是资源加载，如 load、error 等；第 3 种是定时器，如 setlnterval()、setTimeout()。

8.4.3 执行机制

当定时器的时间设为 0 的时候，就会产生一个问题，到底是为定时器传入的回调周函数优先执行，还是 setTimeout() 后面的代码优先执行呢?

示例代码如下：

console.log(1);

setTimeout(function() {

console.log(3);
}, 0);

for(var i = 0, str = ''; i < 900000; i++) {
str += i;
// 利用字符串拼接运算拖慢执行时间
}

console.log(2);

上述代码执行后，输出顺序为1、2、3。显然，为定时器传入的回调函数是最后执行的。为了降低偶然性，第 5 ~ 7 行的代码拖慢了执行时间，但最终结果仍然是 3 最后输出。

在 JavaScript 中，同步任务是优先执行的，它们会被放入执行栈中执行，而异步任务(回调函数)则被放人任务队列中，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务就会结束等待状态，进人执行栈，开始执行。

因为 JavaScript 的主线程会不断地重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( Event Loop)。

8.5 location 对象

location 对象比较特别，它既是 window 对象的属性，同时也是 document 对象的属性，window location 等同于document.location，它们是引用了同一个对象。location 对象不仅提供了与当前显示文档相关的信息，而且还提供了用户获取和设置窗体的 URL。

8.5.1 URL 的组成

location 对象与 URL 相关，因此在学习 location 对象前，我们先来看一下 URL 的组成。在 Internet 上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为统一资源定位符 ( Unifom Resoure Loator, URL)。

在 URL 中，包含了网络协议、服务器的主机名、端口号、资源名称字符串、参数以及锚点，具体示例如下：

// 示例1
protocol://host[:port]/path/[?query]fragment

// 示例2
http://www.example.com:80/web/index.html?a=3&b=4#res

URL 组成说明

各部分	说明
protocol	网络协议，常用的如 http、ftp、mailto 等
host	服务器的主机名，如 www.example.com
port	端口号，可选，省略时使用协议的默认端口，如 http 默认端口为 80
path	路轻，如 " /web/index.html "
query	参数为键值对的形式，通过 " & " 符导分隔，如 " a=3&b=4 "
fragment	锚点，如 " #res " ，表示页面内部的锚点

8.5.2 location 的常用属性

BOM 中 location 对象提供的方法，可以更改当前用户在浏览器中访问的 URL ，实现新文档的载入、重载以及替换等功能。

location 对象提供的 search 属性返回 URL 中的参数，通常用于在向服务器查询信息时传入一些查询条件，如页码，搜索的关键字、排序方式等。除了 search 属性外，location 对象还提供了其他的属性，用于获取或设置对应的 URL 地址的组成部分，如服务器主机名、端口号、URL 协议以及完整的 URL 地址等。

location 对象的属性

属性	说明
location.search	返回(或设置)当前 URL 的查询部分( " ? " 之后的部分)
location.hash	返回一个 URL 的锚部分( 从 " # " 开始的部分)
location.host	返回一个 URL 的主机名和端口
location.hostname	返回 URL 的主机名
location.href	返回完整的 URL
location.pathname	返回 URL 的路径名
location.port	返回一个 URL 服务器使用的端口号
location.protocol	返回一个 URL 协议

8.5.3 [ 案例 ] 获取 URL 参数

在实现登录功能时。需要在登录页面（ login.html ）进行表单提交。如果用户输入正确，则提交到 index.html 首页，并且需要把输人的用户名传递过去，这样首页中就可以获取并使用该用户名。了解了产品需求之后，接下来我们开始编写业务逻辑代码。

(1) 创建 login.html 登录页面，搭建表单结构，示例代码如下：

<form actlon="index html">
用户名: 
<input type="text" name="uname">
<input type="submit" value="登录">
</form>

上述代码中，使用 action 属性把表单提交到 index.html 页面。第4行 input 表单元素 type 属性设置为 " submit " ，表示当单击 " 登录 " 按钮时，表单自动提交。

(2) 创建 index.html 首页，示例代码如下：

<body>

<div></div>
<!-- div 元素用于展示从 login.html 页面传递过来的参数。-->

<script>
console.log (location, search);
// 结果为: ?uname=andy
// 使用 location.search 返回 URL 地址中的参数。

// 1.去掉search中的问号"?"
var params = location.search.substr(1);
console.log (params);
// 结果为: uname=andy
// 用来去掉字符串中第1个字符，也就是把参数字符串最前面的问号“?"去掉。

// 2.把字符串分割为数组
var arr = params.split('=');
console.log (arr);
// 结果为: ["uname", "andy"]
var div = document.querySelector('div');
// 利用 split() 方法把字符串分隔成数组。

// 3.把数据写人div中
div.innerHTML = arr[i] + '欢迎您';
// 为使用 innerHTML 把数据写人 div 中。
</script>

</body>

8.5.4 location 的常用方法

location 对象提供的用于改变 URL 地址的方法，所有主流的浏览器都支持，

location 对象的方法

方法	说明
assign()	载人一个新的文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档，覆盖浏览器当前记录

在上述表中，assign() 方法是比较常用的方式，使用 location.assign() 就可以立即打开一个新的浏览器位置，并生成一条新的历史记录。接收的参数为 URL 地址。

reload() 方法的唯一参数，是一个布尔类型值，将其设置为 true 时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的 " 刷新页面 " 按钮。

replace() 方法的作用就是使浏览器位置发生改变，并且禁止在浏览器历史记录中生成新的记录，它只接受一个要导航到的 URL 参数，而且在调用 replace() 方法后，用户不能返回到前一个页面。

8.6 navigator 对象

navigator 对象包含有关浏览器的信息，但是每个浏览器中的 navigator 对象中都有一套自己的属性和方法，

navigator 对象的属性和方法

分类	名称	说明
属性	appCodeName	返回浏览器的内部名称
属性	appName	返回浏览器览器的完整名称
属性	appVersion	返回浏览器的平台和版本信息
属性	cookieEnabled	返回指明浏览器中是否启用 Conkie 的布尔值
属性	platform	返回运行浏览器的操作系统平台
属性	userAgent	返回由客户端发送到服务器的 User-Agent 头部的值
方法	javaEnabled()	指定是否在浏览器中启用 Java