小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

下述内容所属本专栏系列-第八部分 BOM

8.2 window 对象的常见事件

8.2.1 窗口加载事件

1. window onload

window.onload 是窗口(页面)加载事件，当文档内容 (包括图像，脚本文件、CSS 文件等) 完全加载完成会触发该事件，调用该事件对应的事件处理函数。

JavaScript 代码是从上往下依次执行的，如果要在页面加载完成后执行某些代码，又想要把这些代码写到页面任意的地方，可以把代码写到 window.onload 事件处理函数中。因为 onload 事件是等页面内容全部加载完再去执行处理函数的。

onload 页面加载事件有两种注册方式，分别如下：

// 方式1
window.onload = function() { };

// 方式2
window.addEventListener('load', function () {  } );

需要注意的是，window.onload 注册事件的方式只能写一次，如果有多个，会以最后一个 window.onload 为准。如果使用 addEventListener 则没有限制。

2. document.DOMContentLoaded

doument.DOMContentloaded 加载事件会在 DOM 加载完成时触发。这里所说的加载不包括 CSS 样式表、图片和 flash 动画等额外内容的加载，因此，该事件的优点在于执行的时机更快，适用于页面中图片很多的情况。当页面图片很多时，从用户访问到 onload 事件触发可能需要较长的时间，交互效果就不能实现，这样会影响到用户的体验效果，在这时使用 document.DOMContentLoaded 事件更为合适，只要 DOM 元素加载完即可执行。

需要注意的是，该事件有兼容性问题，IE9以上才支持。

8.2.2 调整窗口大小事件 ( window.onresize 事件 )

当调整 window 窗口大小的时候，就会触发 window.onresize 事件，调用事件处理函数。该事件有两种注册方式，如下所示：

// 方式1
window.onresize = function() {  };

// 方式2
window.addEventListener('resize', function() {  } );

案例：演示利用页面加载事件和调整窗口大小事件完成响应式布局、示例代码如下：

<body>
<script>

window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
if(window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
});
});

</script>

<div style="width: 200px; height: 100px; background-color: pink;">
</div>

</body>

在这里插入图片描述

上述代码中，绑定了 resize 调整窗口大小事件。
根据 if 条件语句进行判断，使用 window.innerWidth 获取当前屏幕的宽度，当屏幕小于等于 800 时隐藏 div 元素，否则显示该元素。

8.3 定时器

8.3.1 定时器方法

在浏览网页的过程中，我们经常可以看到轮播图效果，
即每隔一段时间，图片就会自动切换一次；或者在商品页面看到商品倒计时功能，这些动画就用到定时器。

定时器就是在指定时间后执行特定操作，或者让程序代码每隔一段时间执行一次，实现间歇操作。

在 JavaScript 中，提供了两组方法用于定时器的实现，

定时器方法

方法	说明
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

🌊🌈往期回顾：

HTML入门指南学习专栏「已完结」:

Javascript入门指南学习专栏「更新中」:

🌊🌈关于后记：

感激相遇你好我是阿ken
个人微信：wlpchaojibang 有问题请随时与我交流，一个人可以走的很快，但一群人才可以走的更远!

「关注」：提高学习效率！

👍🏻：原创不易，适当鼓励！

⭐：收藏文章，温故知新！

💬：评论交流，共同进步！

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二十六）

🌊🌈关于前言：

🌊🌈关于内容：

8.2 window 对象的常见事件

8.2.1 窗口加载事件

1. window onload

2. document.DOMContentLoaded

8.2.2 调整窗口大小事件 ( window.onresize 事件 )

8.3 定时器

8.3.1 定时器方法

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

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

🌊🌈往期回顾：

🌊🌈关于后记：