当前位置：首页 > JavaScript

js实现阻塞

2026-03-01 01:05:33JavaScript

同步阻塞

使用同步代码会阻塞JavaScript的执行，直到当前任务完成。由于JavaScript是单线程的，同步操作会阻止其他代码执行。

function syncBlock() {
    const start = Date.now();
    while (Date.now() - start < 3000) {} // 阻塞3秒
    console.log("同步阻塞完成");
}
syncBlock();
console.log("后续代码被阻塞");

循环阻塞

通过循环占用主线程实现阻塞。这种方式会持续占用CPU资源，导致页面无响应。

js实现阻塞

function loopBlock(duration) {
    const end = Date.now() + duration;
    while (Date.now() < end) {}
    console.log(`阻塞${duration}毫秒完成`);
}
loopBlock(2000);

定时器阻塞

虽然setTimeout本身是异步的，但可以通过递归调用实现类似阻塞的效果。这种方式比纯循环更友好。

js实现阻塞

function timerBlock(ms) {
    const start = Date.now();
    function check() {
        if (Date.now() - start < ms) {
            setTimeout(check, 0);
        } else {
            console.log("定时器阻塞完成");
        }
    }
    check();
}
timerBlock(3000);

Web Worker阻塞

在主线程中创建Worker并等待其完成。这种方式不会阻塞UI线程，但会阻塞主线程的执行流。

function workerBlock() {
    const worker = new Worker(URL.createObjectURL(
        new Blob([`postMessage('done');`], {type: 'application/javascript'})
    ));
    worker.onmessage = () => console.log("Worker完成");
    while(true) {} // 故意阻塞主线程
}

Atomics等待

使用SharedArrayBuffer和Atomics API可以实现真正的线程同步阻塞。

const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);

function atomicsBlock() {
    Atomics.wait(sharedArray, 0, 0); // 无限等待
    console.log("Atomics等待结束");
}