js执行顺序+同步异步

JavaScript021

js执行顺序+同步异步,第1张

按照js同步执行的顺序,函数调用会首先执行for循环,循环5次开启了5个延迟器,延时器内部的回调函数将会异步执行,会在延时1s后进入消息队列等待执行。循环了5次,所以此时i的值为5,然后同步执行console.log打印5,第一次同步执行结束,然后开始执行消息队列的异步任务,打印5个5,中间的undefined是函数调用无返回值返回的。

执行顺序和第一题相同,不同的是延时器被包裹在了一个立即执行函数内容,并把每一次循环的i作为参数传入,此时循环内部的函数形成了一个私有作用域,每一次的i变量被独立保存了起来,因此每一次循环的i的值都会被打印出来。

延时器内部回调函数是异步函数,将在延时结束后,进入消息队列等待执行,因此同步的console.log("CCCC")最优先执行,然后延时0ms的延时器的回调先进入消息队列,1000ms后第一个延时器的回调再进入消息队列等待执行,因此先执行0ms的回调打印DDDD,再执行1000ms的回调打印BBBB。

这里与上一题不同的是中间多了一个执行3s的同步while循环,因此执行顺序是这样的:

第一个延时器延时1s后内部异步回调函数进入消息队列等待执行,

等待while循环3s后打印"CCCC",

循环结束后第一个延时器内部的回调已经进入消息队列第一个执行位置等待执行。

第二个延时器延时0s后内部异步回调函数进入消息队列等待执行,延时结束后排到第一个延时器的回调函数后面,

因此异步队里内部先打印"BBBB",再打印"DDDD"

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

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

执行效果:

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

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

执行效果:

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

完!!

首先引用jquery.scrollLoading.js(上一篇博文有)和jquery.js

把下面代码放到标签里,就会得到异步加载图片的效果

//这个在我上一篇博文有这个

$(document).ready(function () {

//实现图片慢慢浮现出来的效果

$("img").load(function () {

//图片默认隐藏

$(this).hide()

//使用fadeIn特效

$(this).fadeIn("5000")

})

// 异步加载图片,实现逐屏加载图片

$(".scrollLoading").scrollLoading()

})

注意img里的class,在这里就不细说了

data-url表示将要异步加载的图片,src表示首先加载的图片(一般会是小图片,或者是一个动画,网页中全部的src链接同一个图片,这样网页就加载快好多,这个时候再异步的加载要加载的图片,也就现在要说的功能)

<img class="scrollLoading" data-url="image/logo.jpg" src="/Images/120.gif" />