张恒_ZH 2021-08-12 16:48 采纳率: 57.1%
浏览 35
已结题

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>
  • 写回答

2条回答 默认 最新

  • 在下月亮有何贵干 前端领域优质创作者 2021-08-12 17:09
    关注

    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条)

报告相同问题？

问题事件

  • 系统已结题 8月20日
  • 已采纳回答 8月12日
  • 创建了问题 8月12日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效