js执行机制（promise,setTimeout执行顺序）

2018-09-03  本文已影响0人  月半女那

1.关于javaacript

javascript是一门单线程语言，所以javascript是按语句的执行顺序执行的。
虽然js是单线程，但是我们可以将任务分成两类
1.同步任务：需要执行的任务在主线程上排队，一次执行
2.异步任务：没有立马执行但是需要被执行的任务，放在 任务队列里面，

2.javascript事件循环

当我们打开网站的时候，网页的渲染其实是一堆同步任务，不如页面骨架和页面元素的渲染，但是想图片音乐等占用资源大耗时久的任务就是异步任务，
异步执行：

3.setTimeout

在使用setTimeout的时候，经常会发现设定的时间与自己设定的时间有差异，贴段代码看一下

setTimeout(() => {
    task();
},3000)
console.log('执行console');

// 执行console 
// task()

上文所说的setTimeout是一个异步的所以会先执行console这个同步任务
但是，如果改成下面这段会发现执行时间远远超过预定的时间

setTimeout(() => {
    task()
},3000)

sleep(10000000)

这是为啥？？
我们来看一下是怎么执行的：

还会遇到一种情况，就是setTimeout(fn(),0),这样的代码其含义主要是在这个任务会在主线程最早可得的空闲时间执行，换句话说就是主线程的任务执行结束之后立马执行

console.log('先执行这里');
setTimeout(() => {
    console.log('执行啦')
},0);

// 先执行这里
// 执行啦

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。

4.promise 和 process.nextTick(callback)

process.nextTick(callback)类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数。

除了广义的同步任务和异步任务，我们可以分的更加精细一点：

setTimeout(function() {
    console.log('setTimeout');
})

new Promise(function(resolve) {
    console.log('promise');
    resolve(true)
}).then(function() {
    console.log('then');
})

console.log('console');

// promise
// console
// then
// setTimeout

终于结束了，我们来贴段巨复杂的代码搞一搞

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})


// 1,7,6,8,2,4,3,5,9,11,10,12

惊不惊喜，意不意外
我们来分析一下

注意: 以上所说只能是在浏览器中的执行顺序，

5.node.js的Event Loop

Node.js也是单线程的Event Loop，但是它的运行机制不同于浏览器环境。浏览器的Event loop是在HTML5中定义的规范，而node中则由libuv库实现。
node.js运行机制

上一篇下一篇

猜你喜欢

热点阅读