超时定时器setTimeout和间歇定时器setInterval

JavaScript07

超时定时器setTimeout和间歇定时器setInterval,第1张

1.setTimeout方法，可以实现类似多线程的效果

参数：code(some JavaScript code)，定时执行时间，单位默认为毫秒

返回值：定时器id值

说明：clearTimeout方法可以取消。    setTimeout。

setTimeout(alerthello,2000)

fuction alerthello(){

    alert(“hello”)

  }

//浏览器打开后2S后弹出“hello”，且只执行一次

2.setInterval方法，可以实现间歇调用

参数：jscode,time

返回值：定时器id

setInterval(alertworld,2000)

fuction alertworld(){

  alert(“world”)

}

//每2S弹出world，无限执行。

说明：停止setInterval的方法是clearInterval

这两个方法都属于BOM-window对象

js定时器的准确时间

这个相差是不确定的。

因为虽说1000毫秒是1秒，但是js是单线程的，又怎么会有一个线程单独来计算时间呢，那么问题来了。

js是如何定时的？

其实js的setTimeout机制是这样的，每个语句都会加入到执行的队列中，也就是挂起状态，其实是一直往执行队列里面加你写的语句上一句其他代码，或者setTimeout的回调函数里面的代码，执行完了，再次执行已经挂起的setTimeout，那么此时执行时间与电脑配置和js执行效率有关。

所以结论就是，电脑速度越快，js代码效率越高，这个延迟就越小。

但是，一定会有一定的延迟的，因为js是单线程的

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<button type="button" id="cancel">取消定时器</button>

<script>

let time = setInterval(()=>{

console.log('当前时间是：'+timer())

},1000)

function timer(){

let date = new Date()

let hour = date.getHours().toString().padStart(2,"0")

let min = date.getMinutes().toString().padStart(2,"0")

let sec = date.getSeconds().toString().padStart(2,"0")

return `${hour}:${min}:${sec}`

}

document.getElementById('cancel').onclick = function(){

clearInterval(time)

alert('已取消定时器')

}

</script>

</body>

</html>