详解JavaScript如何实现更短时间的延时函数
作者：hktk_wb
在项目开发中，经常能遇到需要延时执行的需求，比如实现一个定时器功能。
使用setTimeout实现延时函数
最常见的方式的就是使用setTimeout函数来实现了
// 延时
function sleep(time = 1000) {
const promise = new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
return promise;
}
// 使用示例
async function run() {
// do something
// 延时2秒
await sleep(2000);
console.log("sleep end!");
// do something
}
run();
延时精度测试
// 延时时间设置为`5ms`，循环执行`1000`次，理论执行时间为`5000ms`。
async function run() {
console.time("run");
for (let i = 0; i < 1000; i++) {
await sleep(5);
}
console.timeEnd("run");
}
run();
// 以下为在浏览器console中的5次运行结果（运行结果在不同电脑配置下可能有出入）
// run: 5776.0888671875 ms
// run: 5775.033935546875 ms
// run: 5833.064208984375 ms
// run: 5804.203857421875 ms
// run: 5807.372802734375 ms
如上所示：这样实现其实已经可以满足大部分需求了，但是总还会有一些特别的情况。
比如我想延时1毫秒，使用上面的方式就无能为力了，因为setTimeout在浏览器的实现中限定了最小间隔时间为4ms，在设定小于这个时间时，会默认更改为4ms，因此这个延时函数理论上适用于4ms以上的延时情况。
那有没有其他方式去实现更短时间的延时呢？
使用同步方式实现延时函数
后来想到不使用异步方式，而采用同步方式来实现延时，使用循环来阻塞代码执行以达到延时的效果。
// 延时
function sleep(time = 1) {
const start = performance.now();
let delaying = true;
while (delaying) {
const end = performance.now();
const delay = end - start;
if (delay >= time) {
delaying = false;
}
}
}
// 使用示例
async function run() {
// do something
// 延时1ms
sleep(1);
console.log("sleep end!");
// do something
}
run();
延时精度测试
// 延时时间设置为`1ms`，循环执行`1000`次，理论执行时间为`1000ms`
function run() {
console.time("run");
for (let i = 0; i < 1000; i++) {
sleep(1);
}
console.timeEnd("run");
}
run();
// 以下为在浏览器console中的5次运行结果（运行结果在不同电脑配置下可能有出入）
// run: 1000.179931640625 ms
// run: 1000.447998046875 ms
// run: 1000.274169921875 ms
// run: 1000.135009765625 ms
// run: 1000.19091796875 ms
// 延时时间设置为`0.1ms`，循环执行`1000`次，理论执行时间为`100ms`
function run2() {
console.time("run");
for (let i = 0; i < 1000; i++) {
sleep(.1);
}
console.timeEnd("run");
}
// 以下为在浏览器console中的5次运行结果（运行结果在不同电脑配置下可能有出入）
// run: 167.093017578125 ms
// run: 166.85302734375 ms
// run: 167.038818359375 ms
// run: 166.60498046875 ms
// run: 167.81787109375 ms
可以看出，如果使用同步方法做延时，精确度和最小延时时间都有突破性提高。
但是用此方式有一个极大的弊端，阻塞代码运行及浏览器渲染。因为js为单线程运行，以同步方式做延时就会导致其他代码执行阻塞，浏览器页面渲染也被阻塞。
因此该方式只适用于极小时间的延时，或者在web worker中使用。
那有没有方法即使用异步的方式延时，又能突破setTimeout的4ms时间限制呢？
使用MessageChannel实现延时函数
后来想到是不是能利用MessageChannel的消息传输来实现延时作用。 然后就使用此API实现了一版延时函数
// 延时
function sleep(time = 1) {
const channel = new MessageChannel();
function timeout(callback) {
channel.port1.onmessage = callback;
channel.port2.postMessage(null);
}
return new Promise((resolve) => {
const start = performance.now();
const cb = () => {
const end = performance.now();
const delay = end - start;
if (delay >= time) {
resolve();
} else {
timeout(cb);
}
};
timeout(cb);
});
}
// 使用示例
async function run() {
// do something
// 延时1ms
await sleep(1);
console.log("sleep end!");
// do something
}
run();
延时精度测试
// 延时时间设置为`1ms`，循环执行`1000`次，理论执行时间为`1000ms`
async function run() {
console.time("run");
for (let i = 0; i < 1000; i++) {
await sleep(1);
}
console.timeEnd("run");
}
run();
// 以下为在浏览器console中的5次运行结果（运行结果在不同电脑配置下可能有出入）
// run: 1045.72607421875 ms
// run: 1049.069091796875 ms
// run: 1064.760986328125 ms
// run: 1070.867919921875 ms
// run: 1079.14892578125 ms
// 延时时间设置为`0.1ms`，循环执行`1000`次，理论执行时间为`100ms`
async function run2() {
console.time("run");
for (let i = 0; i < 1000; i++) {
await sleep(.1);
}
console.timeEnd("run");
}
// 以下为在浏览器console中的5次运行结果（运行结果在不同电脑配置下可能有出入）
// run: 207.505126953125 ms
// run: 193.7880859375 ms
// run: 199.333984375 ms
// run: 207.157958984375 ms
// run: 196.8740234375 ms
可以看出使用此方式也能得到很好的效果，而且使用了异步方式来实现，缺点可能就增加了cpu工作，会一定程度上影响性能。
从以上三种实现方式来看，在延时时间短到1ms以下时，即使有方法实现，精确度也会大大降低。并且在实现短时间延时函数时使用到了performance.now函数，此函数的精确度也无法保证，可能进一步加剧了延时不准确的问题。
实际上在浏览器中这么短时间的延时需求并不常见，相似的需求在服务端实现或许能有更好的表现。
这里只是针对在浏览器环境中实现短时间延时的方法做了一定的探讨和研究，供大家参考(nodejs不在本次讨论范围)。
到此这篇关于详解JavaScript如何实现更短时间的延时函数的文章就介绍到这了,更多相关JavaScript延时函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！