js除了使用setTimeout外,怎么能让一行代码执行完之后再执行下一个函数?

JavaScript013

js除了使用setTimeout外,怎么能让一行代码执行完之后再执行下一个函数?,第1张

1、正常情况下代码都是顺序执行,直接在那行代码下调用函数就会在那行代码执行完再执行,如果是处于异步条件下或者要等待dom元素加载完毕才能拿到值的话才需要setTimeout

2、可以提供一个思路:设置一个状态为false的变量,在你代码执行完毕以后,修改状态为true。监听或者通过if来判断状态的变化,然后调用函数。

第一种情况:运动函数执行完之后再执行另外一个函数 

注释:按钮点击之后,div先显示出来,然后宽度和高度再增加到300px

<button class="btn">点击我</button><div id="div2">

<p>人的灵魂所必须的东西,是不需要用金钱来买的</p></div><style>

div{height: 200pxwidth: 200pxpadding:15pxbackground: #ecececdisplay: none}</style><script>$().ready(function(){

$('.btn').click(function(){

$('div').show()

$('div').animate({            'width':'300px',            'height':'300px'

},1000)

})

})12345678910111213141516171819

或者这样写,如果div的高度宽度增加到300px,然后会执行另外一个函数,div的背景色会变成绿色

$().ready(function(){

$('.btn').click(function(){

$('div').show()

$('div').animate({            'width':'300px',            'height':'300px'

},function(){

$(this).css('background','green')

})

})

})123456789101112

第二种情况:把函数a绑定到函数c 上,按钮点击的时候执行函数c,传入的参数是a ,那么函数就先执行函数a(),然后再执行函数b()就形成了先后执行函数

$().ready(function(){

$('.btn').click(function(){

c(a)

})

})function a() {

$('div').animate({'width':'300px'},1000)

}function b(){

$('div').animate({'height':'300px'},1000)

}function c(x){

x()

b()

}

在我们的程序中有些操作是需要等到一些接口的数据返回之后才能做的操作

比如我们在一个页面需要发送好几个请求,这几个请求都发送完了我们再去隐藏 loading效果,一开始我是这样操作的:

执行效果:

只是返回了 失败回调,这显然不是我们想要的效果

但是,我们写好的时候,使用 Promise.all()方法的时候,想起来,Promise.all()这个方法,只要这个方法的任意一个 promise有reject也就是失败状态的时候,promise 不管剩余的其他的promise 是否完成,就会停止当前的监听,那就有可能丢失当前的 其他请求的状态和结果,所以我们在写的时候,就应该考虑,我们当前promise的执行权是不是应该交给当前单个promise的回调具体应该怎么操作呢

执行效果:

然后我们判断,返回结果的 数组的长度是否等于传入数组的长度,就能知道请求是发送完成了(不管请求结果是怎样);

完!!