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

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

JavaScript

九州編程 2019-04-10 20:47:42

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

森林海

TA貢獻2011條經(jīng)驗獲得超2個贊

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

反對回復(fù) 2019-04-10

阿波羅的戰(zhàn)車

TA貢獻1862條經(jīng)驗獲得超6個贊

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