js 回调函数问题

为什么 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>

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

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

我举个例子：

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

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

试试这样写：

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 会马上触发；

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

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

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

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

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); 
}

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

【热门文章】