[TOC] # 3.定时器 1. setTimeout 延时时间到了，就去调用这个回调函数， 只调用-次就结束了这个定时器 2. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数 # 3.1两种定时器 window对象给我们提供了2个非常好用的方法定时器。 ~~~ ●setTimeout() ●setInterval() ~~~ # 3.2 setTimeout()定时器**（只使用一次）** ~~~ window.setTimeout (调用函数，[延迟的毫秒数]) ; ~~~ setTimeout()方法用于**设置一个定时器**,该定时器在定时器**到期后执行调用函数**。 注意: 1. window可以省略。 2.这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名0'三种形式。 第三种不推荐 3.延迟的毫秒数省略默认是0 ,如果写,必须是毫秒。 4.因为定时器可能有很多,所以我们经常给**定时器赋值一个标识符(声明 赋值 一个名字)**。 ## window.setTimeout 使用语法规范: ~~~ //语法规范: window.setTimeout (调用函数，延时时间); // 1.这个window在调用的时候可以省略 // 2.这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0 // 3.这个调用函数可以直接写函数还可以写函数名还有一个写法'函数名()' // 4.页面中可能有很多的定时器，我们经常给定时器加标识符 (名字) setTimeout(function() { console.log('时间到了'); }, 2000); function callback() { console.log('爆炸了'); //第四点 var timer1 = setTimeout(callback, 3000); var timer2 = setTimeout(callback, 3000); setTimeout('callback()', 3000); //我们不提倡这个写法 ~~~ 3.2 setTimeout()定时器 ~~~ window.setTimeout (调用函数，[延迟的毫秒数]); ~~~ **setTimeout()这**个调用函数我们也称为**回调函数callback** 普通函数是按照代码顺序直接调用。 而这个函数,**需要等待时间**,时间到了才去调用这个函数,因此称为回调函数。 简单理解:回调,就是回头调用的意思。**上一件事干完**,再**回头再调用这个函数**。 以前我们讲的**element.onclick = function0{}或者element.addEventListener("click" , fn);里面的函数也是回调函数**。 # 3.3停止setTimeout()定时器 ~~~ window.clearTimeout(timeoutID) ~~~ clearTimeout ()方法取消了先前通过调用setTimeout ()建立的定时器。 **注意:** 1.window可以省略。 2.里面的参数就是定时器的标识符。 ~~~ < button>点击停止定时器</button> <script> var btn = document.querySelector( ' button'); //获取元素 var timer = setTimeout( function() { console.log( '爆炸了');},5000); btn.addEventlistener( 'click', function() { clearTimeout(timer); }) </script> ~~~ # 3.4 setInterval()定时器**（每个一个时间，运行一次，循环）** ~~~ window.setInterval (回调函数，[间隔的亳秒数]); ~~~ setInterval()方法**重复调用一个函数**,每**隔这个时间**,就去**调用一次回调函数**。 **注意:** 1.window可以省略。 2.这个调用函数可以直接写函数,或者写函数名或者采取字符串‘函数名0'三种形式。 3.间隔的毫秒数省略默认是0 ,如果写,必须是毫秒,表示每隔多少毫秒就自动调用这个函数。 4.因为定时器可能有很多,所以我们经常给定时器赋值一个标识符。 ~~~ <script> // 1. setInterval //语法规范: window.setInterval(调用函数，延时时间); setInterval(function() { console.log('继续输出'); }, 1000); // 2. setTimeout 延时时间到了，就去调用这个回调函数， 只调用-次就结束了这个定时器 // 3. setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数 </script> ~~~ # 3.5停止setInterval()定时器 ~~~ window.clearInterval (intexvalID) ; //（）定时器名字 ~~~ clearInterval()方法取消了先前通过调用setInterval ()建立的定时器。 **注意:** 1.window可以省略。 2.里面的参数就是定时器的标识符。 ~~~ 开启定时器 停止定时器 <button class="begin">开启定时器</button> <button class="stop" >停止定时器</button> <script> var begin = document.querySelector(' .begin' ); var stop = document.querySelector(' .stop'); var timer = null; //全局变量 nul1是一个空对象 begin. addEventListener( 'click', function() { timer = setInterval(function() { console.1og('ni hao ma' ); }, 1000); }) stop.addEventListener( 'click', function() { clearInterval(timer); }) </script> ~~~ # 3.2案例: 5秒后自动关闭的广告 ## 案例分析 ①核心思路: 5秒之后,就把这个广告隐藏起来 ②用定时器setTimeout ## 代码实验 ~~~ <img src=" images/ad.jpg" alt="" class=" ad"> <script> var ad = document.querySelector(' .ad'); //window.setTimeout (调用函数，[延迟的毫秒数]); setTimeout( function() { ad.style.display ='none' ;}, 5000); //5000毫秒=5秒 </script> ~~~ # 3.4案例:倒计时 （重点 开发常用 秒杀倒计时）  ## 案例分析 ①这个倒计时是不断变化的,因此需要定时器来自动变化( setInterval ) ②三个黑色盒子里面分别存放时分秒 ③三个黑色盒子利用innerHTML放入计算的小时分钟秒数 ④第一次执行也是间隔毫秒数，因此刚刷新页面会有空白 ⑤最好采取封装函数的方式，这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题 ## 代码实验 ~~~ <div> <span class= "hour" >1</span> <span class="minute" >2</span> <span class=" second">3</span> </div> <scriptp> //1获取元素 var hour = document.querySelector(' .hour'); 1/小时 var minute=document.querySelector(' .minute'); 11分钟 var second=document.querySelector('.second'); //秒数 var inputTime=+new Date( ' 2021-02-09 20:00:00'); //返回用户输入时间的总毫秒数 countDown(); //我们先调用一次这个函数，防止第次刷新页面有空白 //2.开始定时器 setInterval (countDown, 1000); function countDown() { var nowTime = +new Date(); //返回当前的时间总的毫秒数 var times = (inputTime - nowTime) / 1000; //times是剩余的总的秒数 //parseInt转为数字型 h=parseInt(times / 60 / 60 % 24); //时 h = h<10? '0’+ h: h; hour.innerHTML = h; //把小时给黑色盒子; parseInt(times / 60 / 60 % 60); //分 n=m<10? '0'+m : m; minute.innerHTML = m; //把小时给黑色盒子; s = parseInt(times % 60); //秒 s=s<10?'0'+s: s; second.innerHTML = s; //把秒给黑色盒子; </script> ~~~  # 3.4案例:发送短信 点击按钮后,该按钮60秒之内不能再次点击,防止重复发送短信  ## 案例分析 ①按钮点击之后,会禁用disabled为true ②同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改 ③里面秒数是有变化的,因此需要用到定时器 ④定义一个变量，在定时器里面,不断递减 ⑤如果变量为0说明到了时间,我们需要停止定时器,并且复原按钮初始状态。 ## 代码实验 ~~~ 手机号码: <input type="tel"> <button> 发送</button> <script> var btn=document.querySelector( ' button'); var time= 3; //定义剩下的秒数 btn.addEventListener('click', function() { btn.disabled = true; var timer = setInterval(function() { if (time == 0) { //清除定时器的复原按钮 ClearInterval(timer); btn.disabled = false; btn.innerHTML ='发送'; time = 3; //这个3是重新开始 else { btn.innerHTML = '还剩下'+ time + '秒'; time-- ;} }, 1000)}) ~~~