【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二十六）
关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触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
作者：请叫我阿ken
链接：https://juejin.cn/post/7018045208990318629