js自制无阻塞sleep函数

js自制无阻塞sleep函数

与大多数语言不同，js中无自带sleep函数，但是可以通过promise与await实现。

第一步 设立sleep

制作sleep函数，首先要编写一个名为sleep的promise函数，promise函数在运行resolve的时候结束，所以如果在promise函数内部，将resolve包裹在定时器中，函数执行的时间就变得可控。

function sleep(interval) {
    return new Promise(resolve => {
        setTimeout(resolve, interval);
    })
}

在vue中，该函数可直接定义在methods中。

第二步 调用sleep

上面讲到，sleep是一个运行时间可控的函数，但也是一个异步函数（详查promise）。

如果把异步函数直接放置在主函数中，是不会起到休眠主函数效果的。这时需要使用await，指明等待异步完成后继续运行。

async与await是ES7中提供的处理异步的方法，await必须在async中使用。

async function test(){
	var ii=0;
	while(true){
	    ii++;
	    i=0;
		console.log("外层",ii);
		for(i=0;i<5;i++){
			if(i!=0) await sleep(3000);
			console.log("外层",ii,"内层await",i);
		}
	}
}

代码效果为外层从第一层开始，等待内层轮完后外层切换下一层。

代码效果

控制台

[work] 20:50:58 外层 1
[work] 20:50:58 外层 1 内层await 0
[work] 20:51:01 外层 1 内层await 1
[work] 20:51:04 外层 1 内层await 2
[work] 20:51:07 外层 1 内层await 3
[work] 20:51:10 外层 1 内层await 4
[work] 20:51:10 外层 2 at js/setinterval.js:12
[work] 20:51:10 外层 2 内层await 0
[work] 20:51:13 外层 2 内层await 1
[work] 20:51:16 外层 2 内层await 2
[work] 20:51:19 外层 2 内层await 3

针对vue的适配

promise函数可包含在普通方法中放在methods中，直接调用，也可将其放置在钩子函数中直接使用

await需要包裹在async中，所以需要一个async类型的function的外层包裹

async函数定义后不执行，需要跟随调用函数，也可使用(function(){})()自调用

在vue中往往要对data做出修改，当希望对方法外部的this.data或者其他值做出修改时，可使用箭头函数做this穿透，使函数内外this保持一致

形式：(参数列表)=>(函数体)