js多线程全部获得结果后同一处理结果,ArrayBuffer格式转换

AF01

已于 2022-08-03 16:03:01 修改

阅读量272

点赞数

分类专栏：函数文章标签： javascript 前端 vue.js

于 2022-06-11 17:29:18 首次发布

本文链接：https://blog.csdn.net/songJunFeng1/article/details/125236780

版权

函数专栏收录该内容

34 篇文章 1 订阅

订阅专栏

html 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        function feb(n) {
            if (n == 1 || n == 2) {
                return 1
            }
            return feb(n - 1) + feb(n - 2)
        }
        let a = +new Date();
        let n1 = 42;
        let data2 = feb(n1)
        console.log(data2);
        console.log('未开启多线程单个耗时：',+new Date() - a);


        let time1 = +new Date();
        let promiseArr = []
        for (let index = 0; index < 13; index++) {
            let worker = new Worker('worker.js')
            let p = new Promise((resolve, reject) => {
                worker.postMessage(n1)
                worker.onmessage = e => {
                    resolve(e.data)
                }
                worker.onerror = error => {
                    reject(error)
                }
            })
            promiseArr.push(p);
        }


        console.log(promiseArr);
        Promise.all(promiseArr).then(data => {
            console.log(data);
            console.log('开启多线程耗时：',+new Date() - time1);
        })

    </script>
</body>

</html>

worker.js

function feb(n) {
    if (n==1||n==2) {
        return 1
    }
    return  feb(n-1)+feb(n-2)
}
let a = +new Date();
let n= 2;
self.onmessage = function(event) {
    n = event.data;
    console.log("onmessage:",event.data);
    let data1 =  feb(n)
    console.log(+new Date()-a);
    self.postMessage(data1)
    self.close();
};

ArrayBuffer and Str

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        class WorkersClass {
            constructor(n) {
                this.n = n
            }
        }
        let newData = new WorkersClass(1);
        // myWorker = new SharedWorker("worker.js");
        // myWorker.port.postMessage(newData);

        // myWorker.port.onmessage = function (e) {
        //     var result = e.data;//此处就是共享现成推送过来的数据可以是字符串、数组、json
        //     /***********上面拿到数据后，就可以在下面做一些你想造做的事************/
        //     console.log(result);
        // };
        let worker = new Worker('./worker.js')
        //  worker.onmessage = (event) => {
        //    console.log(event.data)
        //  }
         const arrayBuffer = new ArrayBuffer(10)
         console.log(arrayBuffer);
         worker.postMessage(arrayBuffer, [arrayBuffer])
         console.log(arrayBuffer)
    </script>
</body>

</html>

let sum = 0
let num = 10000
for (let i = 0; i < num; i++) {
    sum = sum + i
}
console.log('worker compute sum = %d', sum)
// self.postMessage({
//     data: '999'
// })
self.onmessage = (event) => {
    console.log(event.data, '--')
    function str2ab(s,f) {
        var b = new Blob([s],{type:'text/plain'});
        var r = new FileReader();
        r.readAsArrayBuffer(b);
        r.onload = function (){if(f)f.call(null,r.result)}
    }
    function ab2str(u,f) {
        var b = new Blob([u]);
        var r = new FileReader();
         r.readAsText(b, 'utf-8');
         r.onload = function (){if(f)f.call(null,r.result)}
     }
    str2ab('str',function(ab){
        console.log(ab);
        ab2str(ab,function(str){
            //str为字符串
            console.log(str);
        });
    });
    const arrayBuffer = new ArrayBuffer(64)
    self.postMessage(arrayBuffer, [arrayBuffer])
    console.log(arrayBuffer)
}

arrayBuffer 转字符串另外一种方法

// 使用TextDecoder
var enc = new TextDecoder("utf-8");
var uint8_msg = new Uint8Array(evt.data);
console.log(enc.decode(uint8_msg));
// 再转换为json

AF01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js多线程全部获得结果后同一处理结果,ArrayBuffer格式转换

promise处理js多线程全部获得结果后同一处理结果
复制链接

扫一扫

专栏目录

js多线程全部获得结果后同一处理结果,ArrayBuffer格式转换

“相关推荐”对你有帮助么？