Web API 学习笔记 - Worker

短命女 2022-12-16 11:57 134阅读 0赞

### Web API 学习笔记 - Worker ###

*  主线程
 *  子线程
 *  控制台输出结果
 *  参考资料

Worker 可以开启一个新的线程执行目标 `js`。只写个简单的例子，详细见参考资料。

# 主线程 #

main.js

if (window.Worker) { 
    	const myWorker = new Worker("worker.js");
    	
    	// 向 myWorker 发送消息
    	myWorker.postMessage('喂~~~能听到吗？我好想你！');
    	
    	// 收到消息
    	myWorker.addEventListener('message', function(e) { 
    	  	// 输出
    		console.log('myworker: ', e.data);
    		// 1秒后回复
    		setTimeout(()=>{  
    			myWorker.postMessage(e.data.replace('好想','好想好想'));;
    		}, 1000)
    	}, false);
    
    	// 另一种绑定方式，不推荐
    	// myWorker.onmessage = function(e) { ... }
    	
    } else { 
    	console.log('你的浏览器不支持 web workers.')
    }

# 子线程 #

myworker.js

// 接受消失时触发 onmessage 事件。 self 和 this 都是指 Worker 的全局作用域。可加可省
    self.addEventListener('message', function(e) { 
      if (e.data) { 
      	// 输出收到的消息
      	console.log('main: ', e.data);
      	
      	// 1秒后回复
    	setTimeout(()=>{  
    		postMessage(e.data.replace('好想','好想好想'));
    	}, 1000)
      } else { 
        postMessage('你怎么不说话？');
      }
    }, false);
    
    // 另一种绑定方式，不推荐
    // onmessage = function(e) { ... }

# 控制台输出结果 #

main:  喂~~~能听到吗？我好想你！
    main.js:10 myworker:  喂~~~能听到吗？我好想好想你！
    worker.js:5 main:  喂~~~能听到吗？我好想好想好想你！
    main.js:10 myworker:  喂~~~能听到吗？我好想好想好想好想你！
    worker.js:5 main:  喂~~~能听到吗？我好想好想好想好想好想你！
    main.js:10 myworker:  喂~~~能听到吗？我好想好想好想好想好想好想你！
    worker.js:5 main:  喂~~~能听到吗？我好想好想好想好想好想好想好想你！
    main.js:10 myworker:  喂~~~能听到吗？我好想好想好想好想好想好想好想好想你！
    worker.js:5 main:  喂~~~能听到吗？我好想好想好想好想好想好想好想好想好想你！
    main.js:10 myworker:  喂~~~能听到吗？我好想好想好想好想好想好想好想好想好想好想你！
    worker.js:5 main:  喂~~~能听到吗？我好想好想好想好想好想好想好想好想好想好想好想你！
    main.js:10 myworker:  喂~~~能听到吗？我好想好想好想好想好想好想好想好想好想好想好想好想你！
    无限循环。。。

# 参考资料 #

[Demo][]  
[MDN：Web Workers API > Worker 接口][MDN_Web Workers API _ Worker]  
[Web Workers 的基本信息][Web Workers]

[Demo]: https://mdn.github.io/simple-web-worker/
[MDN_Web Workers API _ Worker]: https://developer.mozilla.org/zh-CN/docs/Web/API/Worker
[Web Workers]: https://www.html5rocks.com/zh/tutorials/workers/basics/