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

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,函数立即返回，不需要等待1000mscallback();//执行上面这句立即会执行这一句，不会等到1000ms之后}不是变量的名字叫callback就是回调函数。这样写才是运行完动画之后（1000ms）才调用callbackfunctionstep1(callback){$("#div1").animate({width:"500px"},1000,callback);}