问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
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.2k
    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.8k1587118

        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
            984529

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

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

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

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