当前位置：首页 > JavaScript

js 实现阻塞

2026-04-04 04:39:46JavaScript

阻塞实现方法

在JavaScript中实现阻塞效果可以通过多种方式实现，以下是几种常见的方法：

使用同步XMLHttpRequest

通过同步的XMLHttpRequest请求可以实现阻塞效果，但这种方式在现代前端开发中不推荐使用，因为它会导致页面冻结。

var request = new XMLHttpRequest();
request.open('GET', 'https://example.com', false); // 同步请求
request.send(null);
if (request.status === 200) {
    console.log(request.responseText);
}

使用循环阻塞

通过while循环配合时间判断可以实现阻塞效果，但这种方式会大量消耗CPU资源。

js 实现阻塞

function sleep(milliseconds) {
    var start = new Date().getTime();
    while ((new Date().getTime() - start) < milliseconds) {
        // 空循环实现阻塞
    }
}
console.log('开始');
sleep(5000); // 阻塞5秒
console.log('结束');

使用Web Worker

Web Worker可以在后台线程中执行耗时操作而不阻塞主线程，但主线程和Worker线程间的通信是异步的。

// 主线程代码
var worker = new Worker('worker.js');
worker.postMessage('开始计算');
worker.onmessage = function(e) {
    console.log('收到结果:', e.data);
};

// worker.js
self.onmessage = function(e) {
    var result = heavyCalculation(); // 耗时计算
    self.postMessage(result);
};

使用Promise和async/await

通过Promise配合async/await语法可以实现非阻塞的异步代码，但看起来像是同步的。

js 实现阻塞

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

async function blockingExample() {
    console.log('开始');
    await delay(3000); // 等待3秒但不阻塞主线程
    console.log('3秒后');
}
blockingExample();

使用Atomics.wait

在共享内存环境中可以使用Atomics.wait实现真正的阻塞。

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

// 线程1
Atomics.store(sharedArray, 0, 123);
Atomics.notify(sharedArray, 0, 1);

// 线程2
Atomics.wait(sharedArray, 0, 0); // 阻塞直到值改变
console.log(sharedArray[0]); // 123