使用 JavaScript 实现阻塞

在 JavaScript 的编程世界里，了解如何实现阻塞是一项重要技能，它在许多场景中都发挥着关键作用。

JavaScript 是一种单线程语言，这意味着在同一时间只能执行一个任务。但有时，我们需要在特定情况下让程序暂停执行，即实现阻塞效果。

一种常见的实现阻塞的方法是利用循环。例如，通过一个简单的 while 循环，可以创建一个阻塞。如下代码：

function block() {
    let start = new Date().getTime();
    while (new Date().getTime() - start < 5000) {
        // 这里可以什么都不做，只是让循环持续一段时间
    }
    console.log('阻塞结束');
}
block();

在这段代码中，while 循环会持续运行，直到当前时间与开始时间的差值达到 5000 毫秒（即 5 秒），这期间程序会被阻塞，后续的代码无法执行。

不过，这种简单的循环阻塞方式在实际应用中有一定的局限性。它会使整个页面冻结，导致用户界面失去响应，影响用户体验。比如在浏览器环境中，如果使用这样的阻塞，页面会出现卡顿现象，按钮点击无反应等。

为了更优雅地处理阻塞需求，我们可以借助 JavaScript 的异步操作。例如 setTimeout 和 Promise。使用 setTimeout 可以在指定的时间后执行代码，实现一种“假阻塞”效果。

function delay() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('延迟执行');
            resolve();
        }, 3000);
    });
}
async function main() {
    console.log('开始');
    await delay();
    console.log('结束');
}
main();

在上述代码中，delay 函数返回一个 Promise，通过 setTimeout 模拟了 3 秒的延迟。main 函数是异步的，使用 await 等待 delay 函数执行完毕，从而实现了一种非阻塞的延迟效果，页面在等待期间依然可以响应用户操作。

掌握 JavaScript 中实现阻塞的方法，能让开发者更好地控制程序的执行流程，根据不同的业务场景做出合适的选择，提升程序的性能和用户体验。无论是简单的循环阻塞还是更高级的异步操作，都是构建强大 JavaScript 应用的有力工具。