js定时器的准确时间？

JavaScript09

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>