防止代码阻塞事件循环

toiithl6 于 2022-09-18 发布在 Java

关注(0)|答案(1)|浏览(163)

我正在研究如何防止任何阻塞代码阻塞主事件循环。

假设有一个函数(假设如果同步实现，它将阻塞事件循环)：

function reverseString(name){
    let revString='';
    for(let i=name.length;i>=0;i--){
        revString+=name[i];
    }
    return revString;
}

如果我使用回调并将其修改为：

function reverseString(name, callback){
    let revString='';
    for(let i=name.length;i>=0;i--){
        revString+=name[i];
    }
     callback(revString);
}

它仍然是一个同步回调。

如何使用回调将函数转换为其异步版本？

JavaScript

来源：https://stackoverflow.com/questions/73762121/prevent-code-from-blocking-the-event-loop

1条答案

按热度按时间

g9icjywg1#

您可以使用Worker将处理移出主事件循环。

Html文档

<!DOCTYPE html> 
<title>Worker Example</title>

<input />
<button>Reverse</button>
<output />

<script>
    const reverser = new Worker('reverser.js');
    reverser.onmessage = e => {
        document.querySelector('output').value = e.data;
    };
    const reverseString = () => {
        const string = document.querySelector('input').value;
        reverser.postMessage({ string });
    };
    document.querySelector('button').addEventListener('click', reverseString);
</script>

reverser.js

onmessage = e => {
    const result = reverseString(e.data.string);
    postMessage(result);
};

function reverseString(name) {
    let revString = '';
    for (let i = name.length - 1; i >= 0; i--) {
        revString += name[i];
    }
    return revString;
}

(注意：您的反转循环已中断；我在本例中修复了它)。

赞(0）回复(0）举报 2022-09-18

我来回答

防止代码阻塞事件循环

1条答案

Html文档

reverser.js

相关问题

热门标签

最新问答