js 用return中断函数后怎么继续执行?

作者站长头像
站长
· 阅读数 9

点击提交后,用ruturn终止了程序运行,并出现弹窗.我想让点击继续按钮接着执行程序,输出333.代码:

<!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>Document</title>
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
    <input type="text" name="" id="username">
    <button id="btn">提交</button>

    <div class="popup">

        <div class="btn_box">
            <p id="confirm">继续</p>
            <p id="replace">取消</p>
        </div>
    </div>
</body>
<style>
    .popup{display: none;width:500px;max-width:100%;position: absolute;padding:20px 30px;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: rgba(61,60,61,1);z-index:9999;}
    .popup .btn_box{display: flex;justify-content: space-around;align-items: center;}
    .popup .btn_box p{padding:6px 16px;background-color: #f4bc24;font-size: 16px;color:#fff;margin-bottom: 0px;cursor: pointer;}
</style>
<script>
    var btn = document.getElementById("btn");
    
    btn.onclick = function(callback){
        console.log(111);
        console.log(222);

        var val = document.getElementById("username").value;
        if(val == "123"){
            $(".popup").show();
            $("#confirm").unbind('click').bind('click', function (){
                $(".popup").hide();
            });
            $("#replace").click(function(){
                $(".popup").hide();
                return;
            });
            return;
        }
        
        console.log(333);
    }
</script>
</html>
回复
1个回答
avatar
test
2024-07-14

首先这是异步执行的!!!题主理解的执行顺序我猜可能是:answer image不可以的, 题主应该是刚学习DOM事件吧, 实际的执行逻辑是这样的:

graph TD
    A[输入123] -->|点击执行| B(显示按钮并,注册了取消与继续事件并return)
    B -->|因为return不会打印333| C(主任务执行完毕)

然后:

graph TD
    A[点击继续按钮] --> B(按钮隐藏)

此时程序其实已经执行结束了(第一条红线位置):answer image

当点击继续时执行的是:

 $(".popup").hide();

也就是这个注册的事件: answer image这里传入的是一个函数, 这题主应该知道, 一般称之为回调函数. 该回调函数中只进行了隐藏并没有打印, 因此可以将console.log(333);放进回调函数中即:

      $("#confirm").unbind('click').bind('click', function () {
        $(".popup").hide();
        console.log(333);
      });

对JS 的执行顺序(因为它是异步执行的)的疑惑在初学时也许常见(反正我绕了许久, 尤其还因为学过C语言与Python多进程), 多写些代码, 就会明白了

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容