当前位置:首页 > JavaScript

js阻塞实现

2026-03-14 02:47:32JavaScript

阻塞实现的方法

在JavaScript中,阻塞通常指同步操作阻止代码继续执行,直到当前任务完成。以下是几种常见的阻塞实现方法:

同步XMLHttpRequest 使用XMLHttpRequest对象进行同步请求,会阻塞代码执行直到请求完成。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com', false); // 同步请求
xhr.send();
console.log(xhr.responseText); // 请求完成后才会执行

同步函数调用 通过循环或递归实现长时间运行的同步操作,会阻塞事件循环。

function block(ms) {
    const start = Date.now();
    while (Date.now() - start < ms) {}
}
block(5000); // 阻塞5秒

alert/confirm/prompt 浏览器内置的弹窗方法会阻塞UI线程和JavaScript执行。

alert('This will block execution');
console.log('This logs after alert is closed');

注意事项

  • 同步操作会严重影响用户体验,导致页面无响应。
  • 现代前端开发中应尽量避免阻塞操作,改用异步方案(如Promise、async/await)。
  • Node.js中可以使用child_processworker_threads实现非阻塞的并行处理。

替代方案

对于需要等待的操作,推荐使用异步模式:

js阻塞实现

// 使用Promise替代阻塞
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function nonBlockingWait() {
    await delay(5000);
    console.log('5秒后执行');
}
nonBlockingWait();

标签: js
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js实现tab选项卡切换

js实现tab选项卡切换

实现Tab选项卡切换的JavaScript方法 使用纯JavaScript实现Tab切换功能,可以通过监听点击事件动态切换内容显示状态。以下是两种常见实现方式: 基础DOM操作实现 // 获取所有…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…