如何编写不冻结网站UI的JavaScript延时功能？

你现在碰到的核心问题是：JavaScript是单线程运行的，你写的那个sleep函数用了一个持续运行的while循环，会把主线程完全占住——浏览器所有的UI交互、渲染任务都得等这个循环结束才能处理，所以Button-2在15秒内根本点不动。

要实现不阻塞UI的延时操作，你得用浏览器提供的异步API setTimeout，它的工作方式是把要延时执行的代码放到事件队列里，等主线程空闲的时候再触发，完全不会影响其他UI操作。

修改后的代码如下：

<html>
<head>
    <title></title>
</head>
<body>
    <button onclick="on_click()">Button-1</button>
    <button onclick="console.log('BYE');">Button-2</button>
    <script>
        function on_click() {
            // 用setTimeout替代同步sleep
            setTimeout(function() {
                console.log("HI");
            }, 15000);
        }
        // 删掉原来的同步sleep函数
    </script>
</body>
</html>

简单说下逻辑：

• 点击Button-1后，on_click函数会立刻执行setTimeout，然后就结束了，主线程马上就空闲下来，能正常响应Button-2的点击（点Button-2会立刻输出"BYE"）。
• 15秒后，浏览器会把setTimeout里的回调函数放到主线程执行，这时候控制台就会输出"HI"。

如果之后你需要在延时后执行更多逻辑，直接把代码写到setTimeout的回调函数里就行，或者用ES6的箭头函数让代码更简洁：

setTimeout(() => {
    console.log("HI");
    // 这里可以加更多延时后要执行的代码
}, 15000);

内容的提问来源于stack exchange，提问作者aman