一、定时器(√)
1.1、介绍定时器与清除定时器方法(含案例)
参考文章：window.setInterval-官方文档
设置定时器：setInterval()
js中我们通过使用setInterval()函数来实现定时功能！
函数参数：
hander：指的是你要调用的函数(匿名函数或者指定函数对象)。
timeout：间隔时间，以毫秒为单位，1000就表示1秒。
返回值：此返回值intervalID是一个非零数值(number)，用来标识通过setInterval()创建的计时器，这个值可以用来作为clearInterval()的参数来清除对应的计时器 (使用一个全局变量来进行存储这个值)。
案例：
<body> <p id="m_p">0</p> <script> var m_p = document.getElementById("m_p"); var a = 0; //方式一：在函数中添加一个匿名函数 // setInterval(function () { // a++; // m_p.innerText = a; // }, 1000); //方式二：通过传入一个指定函数 //①定义函数 function addA() { a++; m_p.innerText = a; } //②将指定函数传入到setInterval()中 setInterval(addA, 1000); </script> </body>
清除定时器：clearInterval()
需要传入指定定时器生成的ID，执行该函数时就会删除指定ID的定时器。
测试demo：
<style> * { margin: 0; padding: 0; } p { margin-left: 30px; } </style> <body> <p id="m_p">0</p> <button>清除定时器</button> <script> var m_p = document.getElementById("m_p"); var a = 0; //方式一：在函数中添加一个匿名函数 var intervalID = setInterval(function () { a++; m_p.innerText = a; }, 1000); //清除定时器 var m_button = document.getElementsByTagName("button")[0]; m_button.onclick = function () { //清除定时器,传入指定定时器的ID clearInterval(intervalID); }; </script> </body>
1.2、解决按钮点击时设置定时器setInterval()的小问题
问题提出
问题描述：当我们在点击按钮事件下设置定时器，若是我们多次点击按钮，实际上就会创建多个定时器就会按照对应的时间间隔不断执行！此时作用效果就会叠加，原本1s进行+1的，连续点了多次创建了多个定时器就会1s连续加多次！
<body> <p id="m_p">0</p> <button>添加定时器</button> <script> var m_p = document.getElementById("m_p"); var a = 0;//p标签起始值 var intervalID;//使用一个全局变量来保存ID var m_button = document.getElementsByTagName("button")[0]; //按钮绑定单击事件 m_button.onclick = function () { intervalID = setInterval(function () { a++; m_p.innerText = a; }, 1000); }; </script> </body>
解决方案
解决方案应该有两种：①一旦点击了定时器，该按钮就锁定，无法点击了。②不锁定按钮方式，每点击一次就先清除上一次定时器！
这里的话就演示第二种方式：
<style> * { margin: 0; padding: 0; } p { margin-left: 30px; } </style> <body> <p id="m_p">0</p> <button>添加定时器</button> <script> var m_p = document.getElementById("m_p"); var a = 0;//p标签起始值 var intervalID;//使用一个全局变量来保存ID var m_button = document.getElementsByTagName("button")[0]; m_button.onclick = function () { clearInterval(intervalID);//初次调用intervalID为undefined，传入清除函数也不会报异常 intervalID = setInterval(function () { a++; m_p.innerText = a; }, 1000); }; </script> </body>
1.3、实际案例(设置与删除定时器)
需求：使用两个按钮来进行添加与删除定时器，定时器需要每秒对p标签中的值+1。
源码：
<style> * { margin: 0; padding: 0; } p { margin-left: 30px; } </style> <body> <p id="m_p">0</p> <button>添加定时器</button> <button>删除定时器</button> <script> var m_p = document.getElementById("m_p"); var a = 0;//p标签起始值 var intervalID;//使用一个全局变量来保存ID var m_add_button = document.getElementsByTagName("button")[0]; var m_del_button = document.getElementsByTagName("button")[1]; //添加定时器按钮绑定单击事件 m_add_button.onclick = function () { clearInterval(intervalID);//初次调用intervalID为undefined，传入清除函数也 intervalID = setInterval(function () { a++; m_p.innerText = a; }, 1000); }; //删除定时器按钮绑定单击事件 m_del_button.onclick = function () { clearInterval(intervalID); } </script> </body>
二、延时器(√)
介绍
与定时器大致相同，同样有设置与添加延时器！
语法：
设置延时器：setTimeout()，设置一个延时器，只有当指定时间到了之后会执行函数一次，不会再重复执行。
清除延时器：clearTimeout()，可以清除延时器，与clearInterval()大致相同同样需要传入对应的延时器ID。
示例
需求：点击添加延时器，2s后出现提示框；删除延时器即删除指定id的延时器。
<style> * { margin: 0; padding: 0; } p { margin-left: 30px; } </style> <body> <button>添加延时器</button> <button>删除延时器</button> <script> var m_p = document.getElementById("m_p"); var timeoutID;//使用一个全局变量来保存ID var m_add_button = document.getElementsByTagName("button")[0]; var m_del_button = document.getElementsByTagName("button")[1]; //添加延时器按钮绑定单击事件 m_add_button.onclick = function () { //clearTimeout(timeoutID);//同样也需要删除之前的延时器 timeoutID = setTimeout(function () { alert("2s后延时器触发了！") }, 2000); }; //删除定时器按钮绑定单击事件 m_del_button.onclick = function () { clearTimeout(timeoutID); } </script> </body>
三、认识异步
介绍异步
异步(asynchronous)：不会阻塞CPU继续执行其他语句，当异步完成时，会执行"回调函数"。
重点：对于异步函数不会影响程序的正常执行。例如设置2s的定时器，并不会等待2秒后才执行下一条语句，而是正常往下进行执行！
其实定时器以及延时器的setXXX()方法就是异步函数，其中传入的函数就是回调函数：
示例
需求：在点击按钮时，先设置延时器，其后面输出一条语句，看是否是先等待延时器等待2秒后执行回调函数以后再执行的console输出语句！
效果：对于异步函数，调用执行函数并不会妨碍其他程序的正常执行！
<body> <button>添加延时器</button> <script> var timeoutID;//使用一个全局变量来保存ID var m_add_button = document.getElementsByTagName("button")[0]; //添加延时器按钮绑定单击事件 m_add_button.onclick = function () { timeoutID = setTimeout(function () { alert("2s后延时器触发了！") }, 2000); console.log("changlu❤林儿"); }; </script> </body>
