问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
惠特米勒
    17413

    点击提交后,用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>
    javascript
    阅读 3.1k
    4 个回答
    得票最新
    头像
    玛拉_以琳
      8.7k41541
      ✓ 已被采纳

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

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

      然后:

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

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

      当点击继续时执行的是:

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

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

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

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

      头像头饰
      MrBigShot
        4.7k1487118

        js 函数中 return 之后，会退出当前的函数，所以在同一个函数中return下面的代码是执行不了的
        我觉得在你的代码中，confirm 和 replace 的事件绑定没有必要放在 btn.onclick 中。btn.onclick 中只需要显示 popup，然后把验证和确认的代码放在 confirm 的绑定函数中，把取消的代码放在 replace 的绑定函数中即可。

        头像
        unicreators
          9381314

          你这不都写的差不多了嘛，稍改一下就可以了吧？

          var btn = document.getElementById("btn");
    
const confirm = 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();
            callback();
        });
        $("#replace").click(function(){
            $(".popup").hide();
            return;
        });
        return;
    }
    callback();
}

btn.onclick = function() { 
    confirm(function(){ console.log(333); }); 
}
          头像
          Grewer
            984527

            通过 try catch 的方案是可以做到的, 这里举个例子:

            function test() {
    try {
        const a = 1+1;
        return;
        alert(1);
    } catch(e) {
        alert(2)
    } finally {
        alert(3)
    }
}
test()

            不过我不太提倡用这种方案

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            被 1 篇内容引用
            推荐问题
            宣传栏