首頁(yè) 猿問(wèn) js 回調(diào)函數(shù)問(wèn)題

js 回調(diào)函數(shù)問(wèn)題

JavaScript

慕森王 2019-04-19 15:59:26

為什么step2()里面的console.log($("#div1").width());顯示的不是500而是100回調(diào)函數(shù)不是等step1()執(zhí)行完后再執(zhí)行step2()嗎？那應(yīng)該500呀html無(wú)標(biāo)題文檔*{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);});})

查看完整描述

2 回答

侃侃無(wú)極

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊

首先要理解同步，異步的概念，這個(gè)自己Google。jquery的animate是異步的，也就是說(shuō)在代碼中，callback的執(zhí)行并不會(huì)等待動(dòng)畫(huà)執(zhí)行完成在執(zhí)行，而是在代碼animate執(zhí)行完成就執(zhí)行了。javascript$("#div1").animate({width:"500px"},1000);callback();我舉個(gè)例子：javascriptsetTimeout(function(){console.log(1);},1000);console.log(2);運(yùn)行這個(gè)，輸出的是21而不是12。和上面是類似的原因。

反對(duì) 回復(fù) 2019-04-19

神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

functionstep1(callback){$("#div1").animate({width:"500px"},1000);//這句的意思是#div1寬度設(shè)置為500px,函數(shù)立即返回，不需要等待1000mscallback();//執(zhí)行上面這句立即會(huì)執(zhí)行這一句，不會(huì)等到1000ms之后}不是變量的名字叫callback就是回調(diào)函數(shù)。這樣寫(xiě)才是運(yùn)行完動(dòng)畫(huà)之后（1000ms）才調(diào)用callbackfunctionstep1(callback){$("#div1").animate({width:"500px"},1000,callback);}