js实现阻塞
实现阻塞的方法
在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实现真正的阻塞。
const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);
// 阻塞线程
Atomics.wait(sharedArray, 0, 0, 3000); // 阻塞3秒注意事项
- 避免在主线程中使用真正的阻塞操作，这会导致页面无响应。
- 大多数情况下应使用异步方法（如Promise、setTimeout）模拟阻塞效果。
- Web Worker和SharedArrayBuffer适用于需要高性能计算的场景，但需要注意浏览器兼容性。
