JavaScript实现延时功能的两种方法:忙等待与setTimeout

作者:拾光

时间:2026-10-28

浏览:124

JavaScript原生不提供sleep功能,本文介绍两种实现延时的方法。第一种是通过while循环进行忙等待,利用时间戳判断是否超时,该方法会占用CPU资源。第二种是利用setTimeout函数异步执行代码,这是更推荐的非阻塞延时方案,适用于需要暂停执行但不希望阻塞主线程的场景。

文章目录

JavaScript延时功能概述

JavaScript语言原生并未提供sleep函数,但在实际开发中,我们偶尔需要实现延时功能。



一种常见的思路是执行一个死循环,通过消耗CPU时间来达到延时的目的。然而,这种方法存在明显的缺陷:不同计算机的CPU执行速度差异巨大,这会导致在性能较差的机器上,延时时间远超预期,造成“睡眠”时间过长的问题。



笔者在技术论坛中发现了一种更为机智的解决方案,该方法在不同机器上的执行速度表现一致。在此将这种方法与大家分享。


基于忙等待的延时实现

具体实现代码如下:

 
function sleep(n)
{ 
var start=new Date().getTime();
while(true) if(new Date().getTime()-start>n) break;
} 

需要注意的是,上述方法本质上仍然是通过CPU空转(忙等待)来实现延时。



基于setTimeout的异步延时方案

另一种更常用的方法是利用setTimeout()函数。



该函数的语法结构为:setTimeout(code,millisec)



具体使用范例如下:



var t=setTimeout("alert('5 seconds!')",5000)



这段代码的作用是在millisec指定的毫秒数后执行code代码。在范例中,系统会在5000毫秒后执行alert函数。这种方式同样可以达到类似sleep的延时效果,且不会阻塞主线程。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章