详解JavaScript如何实现更短时间的延时函数

// 延时
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

// 延时
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

// 延时
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