add: 预编译

04-JavaScript基础/40-定时器.md

@@ -0,0 +1,139 @@
+
+
+## 定时器的常见方法
+
+- setInterval()：循环调用。将一段代码，**每隔一段时间**执行一次。（循环执行）
+
+- setTimeout()：延时调用。将一段代码，等待一段时间之后**再执行**。（只执行一次）
+
+备注：在实际开发中，二者是可以根据需要，互相替代的。
+
+## setInterval() 的使用
+
+`setInterval()`：循环调用。将一段代码，**每隔一段时间**执行一次。（循环执行）
+
+**参数**：
+
+- 参数1：回调函数，该函数会每隔一段时间被调用一次。
+
+- 参数2：每次调用的间隔时间，单位是毫秒。
+
+**返回值**：返回一个Number类型的数据。这个数字用来作为定时器的**唯一标识**，方便用来清除定时器。
+
+### 定义定时器
+
+**方式一：**匿名函数
+
+每间隔一秒，将 数字 加1：
+
+```javascript
+    let num = 1;
+   setInterval(function () {
+       num ++;
+       console.log(num);
+   }, 1000);
+```
+
+**方式二：**
+
+每间隔一秒，将 数字 加1：
+
+```javascript
+    setInterval(fn,1000);
+
+       num ++;
+       console.log(num);
+    }
+
+```
+
+### 清除定时器
+
+定时器的返回值是作为这个定时器的**唯一标识**，可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。
+
+setTimeout()的道理是一样的。
+
+代码举例：
+
+```html
+<script>
+    let num = 1;
+
+    const timer = setInterval(function () {
+        console.log(num);  //每间隔一秒，打印一次num的值
+        num ++;
+        if(num === 5) {  //打印四次之后，就清除定时器
+            clearInterval(timer);
+        }
+
+    }, 1000);
+</script>
+
+```
+
+## setTimeout() 的使用
+
+`setTimeout()`：延时调用。将一段代码，等待一段时间之后**再执行**。（只执行一次）
+
+**参数**：
+
+- 参数1：回调函数，该函数会每隔一段时间被调用一次。
+
+- 参数2：每次调用的间隔时间，单位是毫秒。
+
+**返回值**：返回一个Number类型的数据。这个数字用来作为定时器的**唯一标识**，方便用来清除定时器。
+
+### 定义和清除定时器
+
+代码举例：
+
+```javascript
+    const timer = setTimeout(function() {
+        console.log(1); // 3秒之后，再执行这段代码。
+    }, 3000);
+
+    clearTimeout(timer);
+
+```
+
+代码举例：（箭头函数写法）
+
+```javascript
+    setTimeout(() => {
+        console.log(1); // 3秒之后，再执行这段代码。
+    }, 3000);
+```
+
+
+### setTimeout() 举例：5秒后关闭网页两侧的广告栏
+
+假设网页两侧的广告栏为两个img标签，它们的样式为：
+
+
+```html
+<style>
+    ...
+    ...
+
+</style>
+
+```
+
+5秒后关闭广告栏的js代码为：
+
+```html
+    <script>
+        window.onload = function () {
+            //获取相关元素
+            var imgArr = document.getElementsByTagName("img");
+            //设置定时器：5秒后关闭两侧的广告栏
+            setTimeout(fn,5000);
+            function fn(){
+                imgArr[0].style.display = "none";
+                imgArr[1].style.display = "none";
+            }
+        }
+    </script>
+```
+
+