webWorker 异步加载js文件

柔情只为你懂 2021-07-25 00:36 576阅读 0赞

异步一定有一个回调函数
    	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)

发表评论取消回复

表情：

评论列表（有 0 条评论，576人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS异步加载的方式

方法一：Script Dom Element <table> <tbody> <tr> <td> <p>1</p> <p>2</p> <p>3</p>

野性酷女/ 2023年03月01日 13:26/ 0 赞/ 15 阅读

相关 JS_js动态加载js文件和css 文件同步/异步两种方式

方法一 /动态添加js或css,URL:文件路径，FileType：文件类型(js/css)/ function AddJsFiles(URL,FileT

落日映苍穹つ/ 2022年11月21日 14:59/ 0 赞/ 242 阅读

相关异步加载js方案

一直以来想整理一篇文章，关于异步加载js的方案，但因为平时比较忙，关键还是懒吧。。。一直拖到现在有错误或者不当的地方欢迎大家指正哈我们知道默认js加载时同步的，这意味着

素颜马尾好姑娘i/ 2022年07月16日 06:26/ 0 赞/ 254 阅读

相关 JS异步加载

js加载的缺点：加载工具方法没必要阻塞文档，过多js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。有些工具方法需要按需加载，用到再加载，

Myth丶恋晨/ 2022年06月17日 07:49/ 0 赞/ 397 阅读

相关 JS异步加载和延迟加载

1、异步加载的方案：动态插入script标签 1）通过ajax去获取js代码，然后通过eval执行 2）script标签上添加defer或者async属性

绝地灬酷狼/ 2022年06月08日 06:17/ 0 赞/ 652 阅读

相关 JavaScript 异步加载JS

文章目录 script 标签属性 XMLHttpRequest 脚本注入动态创建 script 元素 LazyLo

╰半夏微凉°/ 2022年05月28日 00:15/ 0 赞/ 313 阅读

相关 js异步加载的问题

js异步加载的问题本地测试无任何问题,但是放到服务器上开始报错,经检查是js加载出现了异步问题. 当时采用的是动态加载js的方式,如下:

偏执的太偏执、/ 2022年05月17日 03:53/ 0 赞/ 272 阅读

相关 Vue.js之组件异步加载

当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。此时，我们就需要使用

深碍√TFBOYSˉ_/ 2022年05月14日 13:08/ 0 赞/ 472 阅读

相关动态按需异步加载js文件

<script type="text/javascript"> function YY(data) \{ execScr

迈不过友情╰/ 2021年12月08日 20:07/ 0 赞/ 404 阅读

相关 webWorker 异步加载js文件

异步一定有一个回调函数 1、实现js和html分离 2、js脚本中执行postMessage，回调函数才会生效 3、回调函数的参数为一个对

柔情只为你懂/ 2021年07月25日 00:36/ 0 赞/ 577 阅读