jquery 按下F2时显示遮罩再处理其他业务，处理顺序有问题

按下F2后，会先进行业务处理才会展示i遮罩，顺序有问题
应该先展示遮罩，再处理业务。如何修改才能达到效果

<html>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

<body id = 'list_page'>
    <div id = 'diva'>
        abcd
    </div>
    <div>
        efg
    </div>
    <div id="divmask" style="position:absolute;width:100%;height:100%;background-color:black;opacity: 0.5;top: 0px;left:0px; display: none;"></div>
</body>

<script>

function keyHandle(event) {
    // 按F2
    if (event.keyCode == 113) {
        //$('#divmask').show();
        document.getElementById('divmask').style.display='block';
               // 模拟其他业务处理
        sleep(1000);
        alert('显示遮罩');
    }// 按F4
    else if (event.keyCode == 115) {
        //$('#divmask').hide();
        document.getElementById('divmask').style.display='none';
        sleep(1000);
        alert('隐藏遮罩');
    }
    
}

$(document).keydown(keyHandle);

function sleep(numberMillis) { 
    var exitTime = new Date().getTime() + numberMillis; 
    while (true) { 
        if (new Date().getTime() > exitTime) 
        return; 
    } 
}

</script>
</html>

dom渲染是会被js放在队列中等待空闲加载，而你的sleep函数和alert都是作为同步任务优先处理的，这是浏览器特性，虽然不明白你为什么要这种业务场景，不过改成延迟是可以达到效果的，延迟可以表示异步任务，是可行的


function keyHandle(event) {
        // 按F2
        if (event.keyCode == 113) {
            //$('#divmask').show();
            document.getElementById('divmask').style.display = 'block';
            setTimeout(()=>{
                alert('显示遮罩');
            },1000)

        }// 按F4
        else if (event.keyCode == 115) {
            //$('#divmask').hide();
            document.getElementById('divmask').style.display = 'none';
            setTimeout(()=>{
                alert('隐藏遮罩');
            },1000)
        }

    }

    $(document).keydown(keyHandle);

    const sleep = (numberMillis) => {
        var exitTime = new Date().getTime() + numberMillis;
        while (true) {
            if (new Date().getTime() > exitTime)
                return;
        }
    }

正常的顺序应该是：显示遮罩，停1秒，弹窗。现在的顺序是：停1秒，弹窗，显示遮罩