问答博客资讯标签用户活动
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 回调函数问题

头像
kaipizhe
    1.6k29195272

    为什么 step2() 里面的 console.log($("#div1").width()); 显示的不是 500 而是 100

    回调函数不是等 step1() 执行完后再执行 step2() 吗？那应该 500 呀

    html<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
#div1{ width: 100px; height: 100px; line-height: 100px; text-align: center; border: 1px #000 solid;}
</style>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
</head>

<body>


<div id="div1">
    div1
</div>





<div>
    <input type="button" value="点击">
</div>





<script type="text/javascript">
function step1(callback) {
    $("#div1").animate({ 
        width: "500px"
    }, 1000);
    callback();
}

function step2() {
    $("#div1").animate({ 
        height: "500px"
    }, 1000);
    console.log($("#div1").width());
}

$(function(){
    $("input").on("click", function(){
        step1(step2);
    });
})
</script>


</body>
</html>
    javascriptcallback
    阅读 4.4k
    6 个回答
    得票最新
    头像
    chenhao_ch
      2.1k129
      头像
      bf
        8k62172

        首先要理解同步，异步的概念，这个自己 Google。
        jquery 的 animate 是异步的，也就是说在代码中，callback 的执行并不会等待动画执行完成在执行，而是在代码 animate 执行完成就执行了。

        javascript    $("#div1").animate({ 
        width: "500px"
    }, 1000);
    callback();

        我举个例子：

        javascriptsetTimeout(function(){console.log(1);}, 1000);
console.log(2);

        运行这个，输出的是 21 而不是 12。和上面是类似的原因。

        头像
        zonxin
          12.1k2632
          function step1(callback) {
    $("#div1").animate({ 
        width: "500px"
    }, 1000);   //这句的意思是#div1 宽度设置为 500px,函数立即返回，不需要等待1000ms
    callback(); //执行上面这句立即会执行这一句，不会等到 1000ms 之后
}

          不是变量的名字叫callback就是回调函数。
          这样写才是运行完动画之后（1000ms）才调用callback

          function step1(callback) {
    $("#div1").animate({ 
        width: "500px"
    }, 1000,callback); 
}
          头像
          kikong
            19.1k31320
            $("#div1").animate({ 
    width: "500px"
}, 1000); //[1]
callback();//[2]

            //[1] ,[2] 也是异步执行的哦

            头像
            Nero_Zzz
              1.3k2412

              试试这样写：

              javascript   function step1(callback) {
        $("#div1").animate({
            width: "500px"
        }, 1000, function () {
            callback();//在 animate 执行完成后再调用 callback 
        });
    }

    function step2() {
        $("#div1").animate({
            height: "500px"
        }, 1000, function () {
            console.log($("#div1").width());//在 animate 输出 div1 的 width
        });
    }

    $(function () {
        $("input").on("click", function () {
            step1(step2);
        });
    })

              javascript 是非阻塞的

              javascript$("#div1").animate({
  height: "500px"
}, 1000);
callback();//这个动画执行需要1秒，但是callback 会马上触发；
              头像
              点不着蚊香
                560123

                楼主没有理解同步和异步的概念，而且JS是顺序执行的，即使运行到 $("#div1").animate({ width: "500px" }, 1000);程序也是直接就开始执行下一句的。所谓回调函数，你应该把callback函数放在animate里面

                头像
                bf
                  8k62172

                  樓主的思路徹頭徹尾錯了（我很多年前也犯過，因爲某 API 抽象層做得太完美了，剛開始和同步感覺沒有任何區別）

                  瀏覽器中的 js 沒有任何機制可以阻塞代碼執行，除了同步 xhr（然而這會導致頁面完全無法響應，遂已廢除）。

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