js 回调函数问题

Question

为什么step2()里面的console.log($("#div1").width());显示的不是500而是100回调函数不是等step1()执行完后再执行step2()吗？那应该500呀html无标题文档*{margin:0;padding:0;}#div1{width:100px;height:100px;line-height:100px;text-align:center;border:1px#000solid;}div1functionstep1(callback){$("#div1").animate({width:"500px"},1000);callback();}functionstep2(){$("#div1").animate({height:"500px"},1000);console.log($("#div1").width());}$(function(){$("input").on("click",function(){step1(step2);});})

Answer 1

首先要理解同步，异步的概念，这个自己Google。
jquery的animate是异步的，也就是说在代码中，callback的执行并不会等待动画执行完成在执行，而是在代码animate执行完成就执行了。
javascript$("#div1").animate({
width:"500px"
},1000);
callback();
我举个例子：
javascriptsetTimeout(function(){console.log(1);},1000);
console.log(2);
运行这个，输出的是21而不是12。和上面是类似的原因。
                            

Answer 2

functionstep1(callback){
$("#div1").animate({
width:"500px"
},1000);//这句的意思是#div1宽度设置为500px,函数立即返回，不需要等待1000ms
callback();//执行上面这句立即会执行这一句，不会等到1000ms之后
}
不是变量的名字叫callback就是回调函数。
这样写才是运行完动画之后（1000ms）才调用callback
functionstep1(callback){
$("#div1").animate({
width:"500px"
},1000,callback);
}