js中的两种定时器
一、setInterval()
按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
语法:
window.setInterval(code, millisec)
注意:
-
window 可以省略。
-
第一个参数:重复执行的代码,必须, 有三种形式,可以直接写函数、写函数名、写字符串
”functionName()”
。 -
第二个参数:间隔的毫秒数,必须,省略默认是0,如果写,单位必须是毫秒,表示每隔多少毫秒就自动调用这个函数。(1000毫秒 = 1秒)
-
用
clearInterval(id_of_setinterval)
清除定时器。调用 setInterval() 函数时会获得一个返回值,使用该返回标识符作为参数,可以取消该 setInterval() 所设定的定时执行操作。(在vue和小程序中,切换页面后,原页面设置的定时器如果不清除会一直保留)<div class="box"> <button onclick="start()">开始</button> <button onclick="stop()">停止</button> </div> <script> let int = null function logTime(num) { console.log(new Date().toLocaleTimeString()); } function start() { //直接写函数 int = setInterval(()=>{ console.log(new Date().toLocaleTimeString()); }, 1000) //写函数名 // int = setInterval(logTime, 1000) //写字符串"functionName()" // int = setInterval("logTime()", 1000) //以上三种写法都是每隔一秒在控制台输出一次当前时间,直到 clearInterval() 被调用或窗口被关闭。 } function stop() { clearInterval(int) //或 // int = clearInterval(int) //或 // int = window.clearInterval(int) } </script>
二、setTimeout()
在指定的毫秒数后调用函数或计算表达式。
语法:
window.setTimeout(code, millisec)
-
window 可以省略。
-
第一个参数 code:定时执行的代码,必须, 有三种形式,可以直接写函数、写函数名、写字符串
"functionName()"
。 -
第二个参数:间隔的毫秒数,必须,省略默认是0,如果写,单位必须是毫秒,表示每隔多少毫秒就自动调用这个函数。(1000毫秒 = 1秒)
-
用
clearTimeout(id_of_setinterval)
清除定时器。调用setTimeout()
函数时会获得一个返回值,使用该返回标识符作为参数,可以取消该setTimeout()
所设定的定时执行操作。(如果下例开始定时器后,3s内执行了clearTimeout(int)
,那么logTime()
函数将没机会执行)function start(params) { //直接写函数 // int = setTimeout(()=>{ // console.log(new Date().toLocaleTimeString()); // }, 1000) //写函数名 // int = setTimeout(logTime, 1000) //写字符串'functionName()” int = setTimeout("logTime()", 3000) //以上三种写法都是3秒后在控制台输出当前时间(只输出一次) } function stop() { // clearTimeout(int) //或 // int = clearTimeout(int) //或 int = window.clearTimeout(int) }