webWorker 异步加载js文件

异步一定有一个回调函数
	1、实现js和html分离
	2、js脚本中执行postMessage,回调函数才会生效
	3、回调函数的参数为一个对象,对象的data属性是js脚本中postMessage的参数
	
	使用步骤
	var 对象=new Worker('异步执行的js文件路径');
	对象.onmessage=function(回调对象){ 通过对象.data调用postMessage返回的参数}
	
	异步js文件
	postMessage(参数);

代码示例:

<html>
<head>
	<meta charset="utf-8">
	<title></title>

	<link rel="stylesheet" href="iconfont/iconfont.css">
	<link rel="stylesheet" href="css/1.css" type="text/css">
	<script src='jq/jquery-3.4.1.js'></script>
	<script src="js/bootstrap.min.js"></script>
	<script src='js/swiper.jquery.min.js'></script>
	<script src="js/swiper.animate1.0.2.min.js"></script>
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/animate.min.css">

	<style>

	
	
	</style>
</head>
<body>
	
	<button>开启webWorker</button>
	<script>
	var num=1;
	var timer=null;
	timer=setInterval(function(){
     
		console.log(num++);
	},1000)

	document.querySelector('button').onclick=function(){
     
		var worker=new Worker('js/text1.js');
		worker.onmessage=function(eve){
     
			console.log(eve.data);
		};
	};
	</script>
	
</body>

</html>

异步js文件:

setTimeout(function(){
     

	console.log(22+'hh');
	//写了postMessage回调函数才会执行
	postMessage('黑皇');
},5000)

你可能感兴趣的:(webWorker异步加载,HTML5,新特性,webWorker)