js定时器的准确时间?

JavaScript018

js定时器的准确时间?,第1张

js定时器的准确时间

这个相差是不确定的。

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

js是如何定时的?

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

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

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

JavaScript中可以实现定时器功能的有两个函数——setTimeout和setInterval,二者的不同是setTimeout只执行一次,而setInterval是以指定的时间间隔重复执行。setTimeout可以使用clearTimeout取消,setInterval可以使用clearInterval取消。

有时,我们会用setTimeout(callback,0)将任务推迟一段很短的时间,但是其实通过process.nextTick(callback)来实现会更好,因为Node中的事件循环在一个处理事件队列的循环里运行,每循环一次称为一个“tick”。使用process.nextTick(callback)回调函数会在事件队列内所有事件处理完毕后,会在下次事件循环之前被调用,即进入下个event loop前执行;而setTimeout(callback,0)把回调延迟到后面的某个event loop执行,具体由设置的延时时间和event loop的执行时间决定。

这样可以保证my_async_function函数是顺序执行。

<!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>