异步一定有一个回调函数
1、实现js和html分离
2、js脚本中执行postMessage，回调函数才会生效
3、回调函数的参数为一个对象,对象的data属性是js脚本中postMessage的参数
使用步骤
var 对象=new Worker('异步执行的js文件路径');
对象.onmessage=function(回调对象){ 通过对象.data调用postMessage返回的参数}
异步js文件
postMessage(参数);
Code Example:
<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>
Asynchronous js file:
setTimeout(function(){
console.log(22+'hh');
//写了postMessage回调函数才会执行
postMessage('黑皇');
},5000)
