search

Home  >  Q&A  >  body text

javascript - js 回调函数问题

为什么 step2() 里面的 console.log($("#p1").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;}
#p1{ 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>


<p id="p1">
    p1
</p>





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





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

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

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


</body>
</html>
迷茫迷茫2900 days ago318

reply all(6)I'll reply

  • PHP中文网

    PHP中文网2017-04-10 15:12:03

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

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

    我举个例子：

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

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

    reply
    0
  • ringa_lee

    ringa_lee2017-04-10 15:12:03

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

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

    function step1(callback) {
    $("#p1").animate({ 
        width: "500px"
    }, 1000,callback); 
}

    reply
    0
  • PHP中文网

    PHP中文网2017-04-10 15:12:03

    $("#p1").animate({ 
    width: "500px"
}, 1000); //[1]
callback();//[2]

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

    reply
    0
  • 怪我咯

    怪我咯2017-04-10 15:12:03

    试试这样写：

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

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

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

    javascript 是非阻塞的

    javascript$("#p1").animate({
  height: "500px"
}, 1000);
callback();//这个动画执行需要1秒，但是callback 会马上触发；

    reply
    0
  • 巴扎黑

    巴扎黑2017-04-10 15:12:03

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

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 15:12:03

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

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

    reply
    0
  • Cancelreply