javascript - js 回调函数问题

Question

为什么 step2() 里面的 console.log($("#div1").width()); 显示的不是 500 而是 100 回调函数不是等 step1() 执行完后再执行 step2() 吗？那应该 500 呀 {代码...}

PHP中文网 · Answer

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

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

我举个例子：

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

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

ringa_lee · Answer

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

PHP中文网 · Answer

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

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

怪我咯 · Answer

试试这样写：

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

巴扎黑 · Answer

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

伊谢尔伦 · Answer

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

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