如何使用PyScript不重载页面修改值并实现类控制台逐次输出

• 你所用的Alpha版本PyScript在执行Python代码时，默认会持有JS线程阻塞DOM重绘，直接调用原生asyncio.sleep不会把控制权交还给浏览器渲染进程，因此循环会连续执行完毕，最终只渲染最后一次的赋值结果
• 原代码直接调用浏览器全局document对象的写法，在PyScript的异步执行上下文里存在兼容问题，容易出现DOM操作不生效的情况
• 原HTML头部存在meta标签拼写错误：http-equive应为http-equiv，viewpoert应为viewport，可能引发部分设备渲染异常

使用PyScript官方封装的Element类操作DOM节点，通过异步任务启动循环逻辑，每次更新内容后通过await让出线程，让浏览器完成实时渲染，即可实现无刷新按间隔逐次更新内容的效果。

可直接运行的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态更新示例</title>
    
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
    <div id="myNum" style="background: red; padding: 1rem; font-size: 2rem;"></div>
<py-script>
import asyncio
from pyscript import Element

# 提前缓存DOM节点，避免循环内重复查询
num_display = Element("myNum")

async def count_up():
    for x in range(1, 10):
        # 写入当前值，默认替换原有内容
        num_display.write(x)
        # 等待1秒，期间释放线程给浏览器完成渲染
        await asyncio.sleep(1)

# 注册异步任务，页面加载完成后自动执行
asyncio.ensure_future(count_up())
</py-script>
</body>
</html>

• 上述代码运行后，会每隔1秒将红色区块内的数字替换为下一个值，从1到9逐次显示，全程无需刷新页面
• 如果需要实现类似控制台追加打印而非替换内容的效果，只需要将写入行修改为num_display.write(f"{x}<br>", append=True)，新的数字会追加到原有内容下方

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