setTimeout和setInterval的区别
在指定的毫秒数到达之后执行指定的函数,只执行一次
// 创建一个定时器,1000毫秒后执行,返回定时器的标示 var timerId = setTimeout(function () { console.log('Hello World'); }, 1000); // 取消定时器的执行 clearTimeout(timerId);
- 参数1:函数
- 参数2:时间—毫秒—1000毫秒–1秒
- 执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数,以此往复。。。。。。
- 返回值就是定时器的id值
setInterval()和clearInterval()
定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数
// 创建一个定时器,每隔1秒调用一次 var timerId = setInterval(function () { var date = new Date(); console.log(date.toLocaleTimeString()); }, 1000); // 取消定时器的执行 clearInterval(timerId);
- 参数1:函数
- 参数2:时间—1000毫秒—1秒
- 返回值:该定时器的id(同上一个一样)
二者区别
1.setTimeout和setInterval都属于JS中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直循环下去。
function fun(){ alert('hello'); } setTimeout(fun,1000);//参数是函数名 setTimeout('fun()',1000);//参数是字符串 setInterval(fun,1000); setInterval('fun(),1000');
在上述代码中,无论是setTimeout还是setInterval,在使用函数名作为调用句柄时不能带参数,使用字符串调用时可以带参数。例如:setTimeout(‘fun(name)’,1000);
2.不再单独再定义一个函数,直接将函数调用放在一个函数里面,可以使用函数名作为调用调用句柄。
function fun(name){ alert('hello'+' '+name); } setTimeout (function(){ fun('Tom'); },1000);//参数是函数名
在上述代码中,setTimeout和setInterval的区别就是setTimeout延迟一秒弹出’hello’,之后便不再运行;而setInterval则会隔一秒弹出’hello’,直至用clear来清除定时器的语法。
案例
协议按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <textarea name="texta" id="" cols="30" rows="10"> 你得花五秒钟时间看完了,我才能让你同意 </textarea> <input type="button" value="请仔细阅读协议(5)" id="btn" disabled="disabled" /> <script src="common.js"></script> <script> var time=5; var timeId= setInterval(function () { time--; my$("btn").value="请仔细阅读协议("+time+")"; if(time<=0){ //停止定时器就可以 clearInterval(timeId); //按钮可以被点击了 my$("btn").disabled=false; my$("btn").value="同意"; } },1000); </script> </body> </html>
渐变的div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 300px; height: 200px; background-color: hotpink; } </style> </head> <body> <div id="dv"></div> <input type="button" value="渐变" id="btn"/> <script src="common.js"></script> <script> my$("btn").onclick=function () { var opacity=10; //按钮的点击事件 var timeId=setInterval(function () { //透明化了 opacity--; if(opacity<=0){ clearInterval(timeId);//清理定时器 } //设置div的透明度0-1 my$("dv").style.opacity=opacity/10; },200); }; </script> </body> </html>