为什么 step2()
里面的 console.log($("#p1").width());
显示的不是 500
而是 100
回调函数不是等 step1()
执行完后再执行 step2()
吗?那应该 500
呀
html
无标题文档
p1
樓主的思路徹頭徹尾錯了(我很多年前也犯過,因爲某 API 抽象層做得太完美了,剛開始和同步感覺沒有任何區別)
瀏覽器中的 js 沒有任何機制可以阻塞代碼執行,除了同步 xhr(然而這會導致頁面完全無法響應,遂已廢除)。
楼主没有理解同步和异步的概念,而且JS是顺序执行的,即使运行到 $("#p1").animate({
width: "500px" }, 1000);
程序也是直接就开始执行下一句的。所谓回调函数,你应该把callback函数放在animate里面
试试这样写:
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 会马上触发;
$("#p1").animate({ width: "500px" }, 1000); //[1] callback();//[2]
//[1] ,[2] 也是异步执行的哦
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); }
首先要理解同步,异步的概念,这个自己 Google。
jquery 的 animate 是异步的,也就是说在代码中,callback 的执行并不会等待动画执行完成在执行,而是在代码 animate 执行完成就执行了。
javascript $("#p1").animate({
width: "500px"
}, 1000);
callback();
我举个例子:
javascriptsetTimeout(function(){console.log(1);}, 1000);
console.log(2);
运行这个,输出的是 21 而不是 12。和上面是类似的原因。