1.定时器定义：当我们需要隔一段时间，再执行一段代码。或者每隔一段时间，执行一段代码。我们可以使用定时器。使用场景：例如网站轮播图的自动滚动。广告延迟弹出的某些操作2.定时器-setInterval定时器-setInterval基本定义setInterval 间隔型定时器：每隔一段时间执行一段代码。 注意：代码一般会重复执行语法 setInterval（函数，时间间隔）; eg: setInterval（fn，20）;指的是每隔20 毫秒执行一段函数 时间间隔的单位 ： 是毫秒（ms）1s = 1000ms返回值setInterval（重复执行的代码，时间间隔）;这段代码的返回值是分配定时器一个独有的编号。这个编号跟关闭定时器有关。当你开启很多定时器的时候，你想关闭哪一个定时器，就需要知道对应的编号然后关闭。就是每开启一个定时器，会给这个定时器贴一个编号，编号是数字类型的，会由这段代码的返回值传递出编码。使用举例1—无参函数 <script> //方式一：函数为匿名函数 setInterval(function () { console.log(1); },1000); //方式二：有名函数-part1 function fn() { console.log(2); } setInterval(fn,1000); //方式二：有名函数-part2 function go() { console.log(3); } setInterval("go()",1000); </script>使用举例2—有参函数<script> //方式一：有名函数的传参 function fn(a,b) { console.log(a,b); } setInterval("fn('c','d')",1000); //方式二：匿名函数的传参 setInterval(function(a,b,c){ console.log(a,b,c); },1000,"a","b","c");</script>注意：<script> //以下代码只是开了一个定时器，会在1s之后执行这个函数。 setInterval(function(){ console.log(1); },1000); console.log(222); console.log(333);</script>以下是代码执行结果：先打印222和333。之后1s后打印1.3.setInterval—轮播图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:400px; height:400px; border:2px solid black; background: red; } </style></head><body><div id="box"></div><script> data=["red","blue","yellow","pink"]; var box=document.getElementById("box"); var num=0; var L=data.length; setInterval(function () { num++; //L%num的结果永远会小于L，并且是0，1，2，····L-1这样循环的。 num%=L; box.style.backgroundColor=data[num]; },1000);</script></body></html>自动播放效果，可以点击查看。因为codepen不方便放图片，就用颜色代替4.setInterval—轮播图的停止css样式我就删除了，直接给出js和html。需要全部代码的可以从链接下面去看。点击链接中的css，html，js都可以查看对应的代码。方式一：控制步长来停止轮播图的运动，但是定时器还没关（听语言描述可能有些模糊，直接上代码）通过步长来控制停止轮播图的运动，点击查看效果<body><div id="box"></div><button id="stop">停止播放</button><script> data=["red","blue","yellow","pink"]; var box=document.getElementById("box"); var stop=document.getElementById("stop"); var num=0; var step=1; var L=data.length; setInterval(function () { //通过step来控制颜色的转化。 num+=step; num%=L; box.style.backgroundColor=data[num]; //可以从 console.log(1)看出定时器没关闭，就算停止轮播了，依旧不停的打印1. console.log(1); },1000); stop.onclick=function () { //让step为0，图片就停止在那个地方。但是定时器没关。 step=0; };</script></body></html>方式二：通过一个变量来控制定时器中函数的执行，但是定时器还是没关。通过onoff变量来控制定时器内函数的执行<body><div id="box"></div><button id="stop">停止播放</button><script> data=["red","blue","yellow","pink"]; var box=document.getElementById("box"); var stop=document.getElementById("stop"); var num=0; //默认为true。 var onoff=true; var L=data.length; setInterval(function () { //button点击之后，onoff为false，则无法执行 if(onoff) { num++; num %= L; box.style.backgroundColor = data[num]; } console.log(1); },1000); stop.onclick=function () { //点击之后为false。 onoff=false; };</script></body></html>方式三：通过关闭定时器来停止轮播图的运动。此方法简洁，不需要添加额外的变量。但是有时候也需要以上两种方法。直接关闭定时器，点击css，html，js可以查看对应代码<body><div id="box"></div><button id="stop">停止播放</button><script> data=["red","blue","yellow","pink"]; var box=document.getElementById("box"); var stop=document.getElementById("stop"); var num=0; var L=data.length; //setInterval(）方法返回的是定时器的编号。这个编号是独有的。 var timer=setInterval(function () { num++; num %= L; box.style.backgroundColor = data[num]; console.log(1); },1000); stop.onclick=function () { //clearInterval（），通过传入定时器的编号来。关闭定时器 clearInterval(timer); };</script></body></html>5.setInterval—轮播图的停止和开始方式一：清除定时器，再开启定时器。清除定时器，再开启定时器。注意：重新开启定时器的时候也要清除前一个定时器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width:400px; height:400px; border:2px solid black; background: red; } button{ width: 100px; line-height: 50px; background: cornflowerblue; color: #fff; font-size: 20px; border:none; margin-top: 10px; outline: none; } </style></head><body><div id="box"></div><button id="stop">停止播放</button><button id="star">开始播放</button><script> data=["red","blue","yellow","pink"]; var box=document.getElementById("box"); var stop=document.getElementById("stop"); var star=document.getElementById("star"); var num=0; var L=data.length; function move() { num++; num %= L; box.style.backgroundColor = data[num]; }; var timer=setInterval(move,1000); stop.onclick=function () { //clearInterval（），通过传入定时器的编号来。关闭定时器 clearInterval(timer); }; star.onclick=function () { //每次开启定时器的时候，先清除前一个定时器。因为当用户重复点击开始按钮，就会打开多个定时器。 //所以，每次打开定时器，先清除前一个。 clearInterval(timer); timer=setInterval(move,1000); }</script></body></html>方式二：使用变量控制定时器的开始与停止使用step步长控制定时器的开始与停止<div id="box"></div><button id="stop">停止播放</button><button id="star">开始播放</button><script> data=["red","blue","yellow","pink"]; var box=document.getElementById("box"); var stop=document.getElementById("stop"); var star=document.getElementById("star"); var num=0; var L=data.length; var step=1; function move() { num+=step; num %= L; box.style.backgroundColor = data[num]; }; setInterval(move,1000); stop.onclick=function () { //停止按钮，step=0 step=0; }; star.onclick=function () { //开始按钮，step=1 step=1; }</script>方式三：使用变量重新开始定时器使用变量重新开始定时器<body><div id="box"></div><button id="stop">停止播放</button><button id="star">开始播放</button><script> data=["red","blue","yellow","pink"]; var box=document.getElementById("box"); var stop=document.getElementById("stop"); var star=document.getElementById("star"); var num=0; var L=data.length; var isPlay=true; function move() { num++; num %= L; box.style.backgroundColor = data[num]; }; var timer=setInterval(move,1000); stop.onclick=function () { clearInterval(timer); isPlay=false; }; star.onclick=function () { if(!isPlay){//没有在播放就开始定时器 timer=setInterval(move,1000); } isPlay=true;//改变状态 }</script></body>6.定时器-setTimeout定时器-setTimeout基本定义延迟型定时器隔一段时间执行一段代码（执行一次）语法：setTimeout(函数,时间间隔)比如setTimeout(fn,20)隔（等待）20 毫秒执行一段函数时间间隔的单位 ：是毫秒（ms）1s = 1000ms返回值：定时器唯一的编号注意：虽然只执行一次，就不执行了。但是还是要关闭定时器，不然会消耗性能。1.举例说明点击查看以下代码效果<script> //隔一秒页面会弹出Hello。 var timer = setTimeout( function(){ alert("Hello"); },1000 ); //点击页面任何一个位置关闭定时器。 document.onclick = function(){ clearTimeout( timer ); }</script>2.使用递归，让setTimeout定时器有setInterval的效果点击链接查看以下代码效果！！！<script> var timer = 0; function fn(){ timer = setTimeout( function(){ console.log(1); //继续调用fn，则在控制台还会打印1。 fn(); },1000 ) } fn(); document.onclick = function(){ clearTimeout( timer ) }</script>
