JavaScript定时器与执行机制解析

发表于 | 分类于 |
字数统计: 881 | 阅读时长 ≈ 4

JavaScript定时器与执行机制解析

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i,',');
    }, 1000);
}
console.log(new Date, i,'>>>')

 Wed May 09 2018 22:54:19 GMT+0800 (中国标准时间) 5 ">>>"
 undefined
 Wed May 09 2018 22:54:20 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:20 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:21 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:21 GMT+0800 (中国标准时间) 5 ","
 Wed May 09 2018 22:54:21 GMT+0800 (中国标准时间) 5 ","
`循环执行过程中，几乎同时设置了 5 个定时器`，一般情况下，这些定时器都会在 1 秒之后触发，而循环完的输出是立即执行的


Immediate  立即的，直接的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log( j,',');
        }, 1000);
    }) (i);
}

console.log( i,'>>>');

5 ">>>"
undefined
0 ","
1 ","
2 ","
3 ","
4 ","
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
for (var i = 0; i < 5; i++) {
    setTimeout(function(j) {
        console.log(new Date, j);
    }, 1000, i);
}

console.log(new Date, i);


//////////////////////////////////
var output = function (i) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
};

for (var i = 0; i < 5; i++) {
    output(i);  // 这里传过去的 i 值被复制了
}

console.log(new Date, i);

Sat May 12 2018 16:56:41 GMT+0800 (中国标准时间) 5
undefined
Sat May 12 2018 16:56:42 GMT+0800 (中国标准时间) 0
Sat May 12 2018 16:56:42 GMT+0800 (中国标准时间) 1
Sat May 12 2018 16:56:42 GMT+0800 (中国标准时间) 2
Sat May 12 2018 16:56:42 GMT+0800 (中国标准时间) 3
Sat May 12 2018 16:56:42 GMT+0800 (中国标准时间) 4


//每隔一秒打印一次
for (var i = 0; i < 5; i++) {
    (function(j) {  // j = i
        setTimeout(function() {
            console.log( j,',');
        }, 1000*j);
    }) (i);
}

setTimeout(function(){
    console.log( i,'>>>');
},i*1000)

   0 ","
   1 ","
   2 ","
   3 ","
   4 ","
   5 ">>>"

采用Promise写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//相比而言，笔者更倾向于下面这样看起来更简洁的代码，要知道编程风格也是很多面试官重点考察的点，代码阅读时的颗粒度更小，模块化更好，无疑会是加分点。

const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});

// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});

ES7 ‘async/await’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
});

(async () => {  // 声明即执行的 async 函数表达式
    for (var i = 0; i < 5; i++) {
        // debugger
        if (i > 0) {
            await sleep(1000);
        }
        console.log(new Date, i+'>>>');
    }

    await sleep(1000);
    console.log(new Date, i);
})();

Mon May 14 2018 11:47:13 GMT+0800 (中国标准时间) "0>>>"
Mon May 14 2018 11:47:14 GMT+0800 (中国标准时间) "1>>>"
Mon May 14 2018 11:47:15 GMT+0800 (中国标准时间) "2>>>"
Mon May 14 2018 11:47:16 GMT+0800 (中国标准时间) "3>>>"
Mon May 14 2018 11:47:17 GMT+0800 (中国标准时间) "4>>>"
Mon May 14 2018 11:47:18 GMT+0800 (中国标准时间) 5

JavaScript定时器与执行机制解析

破解前端面试（80% 应聘者不及格系列）从闭包说起
破解前端面试（80% 应聘者不及格系列）：从 DOM 说起