当前位置：首页 > JavaScript

js实现阻塞

2026-01-30 10:01:12JavaScript

实现阻塞的方法

在JavaScript中，由于它是单线程且非阻塞的语言，直接实现阻塞可能会导致性能问题或页面无响应。以下是几种常见的实现阻塞效果的方法：

使用循环阻塞

通过无限循环或长时间循环来阻塞代码执行。这种方法会占用CPU资源，不推荐在实际项目中使用。

function block(time) {
    const start = Date.now();
    while (Date.now() - start < time) {}
}
block(3000); // 阻塞3秒

使用同步XMLHttpRequest

通过同步的AJAX请求实现阻塞。这种方式会阻塞整个页面，现代浏览器已不推荐使用。

function blockSync(time) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/', false); // 同步请求
    xhr.send();
}
blockSync();

使用Promise和async/await

通过Promise和async/await模拟阻塞效果，这种方式不会真正阻塞线程，而是通过异步控制流程实现类似效果。

function delay(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}

async function blockAsync() {
    await delay(3000); // 等待3秒
    console.log('继续执行');
}
blockAsync();

使用Web Worker

在Web Worker中执行长时间任务，避免阻塞主线程。

// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage('start');

// worker.js
self.onmessage = function(e) {
    if (e.data === 'start') {
        const start = Date.now();
        while (Date.now() - start < 3000) {}
        self.postMessage('done');
    }
};

使用Atomics.wait

在现代JavaScript中，可以使用SharedArrayBuffer和Atomics API实现真正的阻塞。

js实现阻塞

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

// 阻塞线程
Atomics.wait(sharedArray, 0, 0, 3000); // 阻塞3秒