顶级对象window
常见的加载事件
- onload 当文档全部加载完成会触发(包括图像、脚本文件、CSS 文件等); 传统注册方式只能写一个,多个以最后一个为准;如果使用addEventListener则没有限制
- DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。
<script> // 第一种 window.onload = function () { alert('111') }; window.addEventListener('load', function () { alert('222') }); // 不影响 document.addEventListener('DOMContentLoaded', function() { alert(33); // 不加载图片等 }) </script>
定时器
- setTimeout() 只执行一次
- setInterval() 反复执行
setTimeout() 定时器
开启定时器
- window.setTimeout(调用函数, [延迟毫秒数])
<script> function callback() { console.log('111'); } var tinner1 = setTimeout(callback, 2000); var tinner2 = setTimeout(callback, 3000); </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <img src="ad.jpg" alt="" class="ad"> <script> var img = document.querySelector('.ad'); setTimeout(function () { img.style.display = 'none'; },2000) </script> </body> </html>
停止定时器
- clearTimeout(TimeoutID)
<button>关闭定时器</button> <script> var timer = setTimeout(function () { console.log('111'); }, 1000); var btn = document.querySelector('button'); btn.addEventListener('click', function () { clearTimeout(timer) }) </script>
setInterval() 定时器
开启定时器
- window.setInterval(调用函数, [延迟毫秒数])
停止定时器
- clearInterval(TimeoutID)
<button>关闭定时器</button> <script> var timer = setInterval(function () { console.log(111); }, 1000); var btn = document.querySelector('button'); btn.onclick = function () { clearInterval(timer) // 关闭定时器 } </script>
注意:
- 第一次执行间隔毫秒之后执行,所有最好执行一次封装的函数,防止开始刷新页面的空白问题