Js 线程锁 navigator.locks

前言

• 环境 Baseline 2022
• 检查控制台# navigator.locks
• 文档链接
• https链接，本地localhost地址测试，不支持http
• 浏览器不同选项卡线程锁

解决方案

• 主要函数navigator.locks.request(锁名称, async func)

const Test = () => {

    const implement = (name) => {
        // navigator.locks.request(name, asynchronous); //与下方函数相等
        navigator.locks.request(name, {mode: "exclusive"}, asynchronous);

        async function asynchronous(lock) {
            console.info('步入1', lock)
            await new Promise((r, j) => {
                console.info('步入2', lock)
                setTimeout(() => {
                    r();
                }, 3000)
            }).then((value) => {

            }).finally(() => {
                console.info('模拟完成')
            })
        }
    }

    return (
        <div>
            <Button onClick={() => implement("111")}>测试锁1</Button>
            <Button onClick={() => implement("222")}>测试锁2</Button>
        </div>
    );
}