# promise与setTimeout 判断执行顺序
promise和setTimeout都会将事件放入异步队列,但setTimeout即便是写0,也会有4ms的延迟
console.log('begin');
setTimeout(() => {
console.log('setTimeout 1');
Promise.resolve()
.then(() => {
console.log('promise 1');
setTimeout(() => {
console.log('setTimeout2');
});
})
.then(() => {
console.log('promise 2');
});
new Promise(resolve => {
console.log('a');
resolve();
}).then(() => {
console.log('b');
});
}, 0);
console.log('end');
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
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
答案
begin
end
setTimeout 1
a
promise 1
b
promise 2
setTimeout2
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# async函数的使用
function repeat(func, times, wait) {
}
// 输入
const repeatFunc = repeat(alert, 4, 3000);
// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');
// 会alert4次 worldhellp, 每次间隔3秒
repeatFunc('worldhello')
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
我自己的实现,没有成功。这种实现是setTimeout新建了两个,然而只清理了一个。
function repeat(func, times, wait) {
var timer = null;
var count = 0;
return function(...args) {
timer = setInterval(function() {
func.apply(null, args);
count ++;
console.log('count', count, "times", times)
if( count >= times) {
clearInterval(timer);
}
}, wait);
}
}
// 输入
const repeatFunc = repeat(console.log, 4, 3000);
// 输出
// 会alert4次 helloworld, 每次间隔3秒
repeatFunc('hellworld');
// 会alert4次 worldhellp, 每次间隔3秒
repeatFunc('worldhello');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
正确解法:使用 async/await来实现
async function wait(seconds) {
return new Promise((res) => {
setTimeout(res, seconds);
});
}
function repeat(func, times, s) {
return async function (...args) {
for (let i = 0; i < times; i++) {
func.apply(null, args);
await wait(s);
}
};
}
let log = console.log
let repeatFunc = repeat(log,4,3000)
repeatFunc('HelloWorld')
repeatFunc('WorldHello')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# async执行练习
- await后面的才是异步的,之前都是同步的
async function async1() {
console.log('async1 start'); // 2
await async2();
console.log('async1 end'); // 6
}
async function async2() {
console.log('async2'); // 3
}
console.log('script start'); // 1
setTimeout(function() {
console.log('setTimeout'); // 8
}, 0);
async1();
new Promise(function(resolve) {
console.log('promise1'); // 4
resolve();
}).then(function() {
console.log('promise2'); // 7
});
console.log('script end'); // 5
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
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