How do I pass a function argument to a web worker, with addEventListener
I have a fairly large web application which now uses several web workers. As a result there is now a fair bit of duplicate code which I would like to reduce, but I am having some problems making my code more generic.
As a starting example here is a working example of a class which returns a new Worker, that will execute the following function on the input and return result:
data => data.map(document => document._id)
export default class WebWorker {
constructor () {
const worker = () => {
self.addEventListener('message', function (e) {
if (!e.data) return
const work = data => data.map(document => document._id)
postMessage(work(e.data))
})
}
const code = worker.toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
This code works as expected. But in order for this to work I have to explicitly write the work function inside the Event Listener. In order to make this code reusable, I need to pass work in from outside.
The implementation I have in my head would look something like this:
export default class WebWorker {
constructor (work) {
const worker = work => () => {
self.addEventListener('message', function (e) {
if (!e.data) return
postMessage(work(e.data))
})
}
const code = worker(work).toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
However, at least when ran in the browser the value of work does not get passed through to the handler of self.addEventListener.
I have tried to do this using .bind but so far to no avail. Can anyone help?
javascript scope refactoring web-worker
edited Nov 22 at 17:15
Andreas
16.2k32741
asked Nov 22 at 16:53
fredmoon
397
add a comment |
I have a fairly large web application which now uses several web workers. As a result there is now a fair bit of duplicate code which I would like to reduce, but I am having some problems making my code more generic.
As a starting example here is a working example of a class which returns a new Worker, that will execute the following function on the input and return result:
data => data.map(document => document._id)
export default class WebWorker {
constructor () {
const worker = () => {
self.addEventListener('message', function (e) {
if (!e.data) return
const work = data => data.map(document => document._id)
postMessage(work(e.data))
})
}
const code = worker.toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
This code works as expected. But in order for this to work I have to explicitly write the work function inside the Event Listener. In order to make this code reusable, I need to pass work in from outside.
The implementation I have in my head would look something like this:
export default class WebWorker {
constructor (work) {
const worker = work => () => {
self.addEventListener('message', function (e) {
if (!e.data) return
postMessage(work(e.data))
})
}
const code = worker(work).toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
However, at least when ran in the browser the value of work does not get passed through to the handler of self.addEventListener.
I have tried to do this using .bind but so far to no avail. Can anyone help?
javascript scope refactoring web-worker
edited Nov 22 at 17:15
Andreas
16.2k32741
asked Nov 22 at 16:53
fredmoon
397
add a comment |
I have a fairly large web application which now uses several web workers. As a result there is now a fair bit of duplicate code which I would like to reduce, but I am having some problems making my code more generic.
As a starting example here is a working example of a class which returns a new Worker, that will execute the following function on the input and return result:
data => data.map(document => document._id)
export default class WebWorker {
constructor () {
const worker = () => {
self.addEventListener('message', function (e) {
if (!e.data) return
const work = data => data.map(document => document._id)
postMessage(work(e.data))
})
}
const code = worker.toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
This code works as expected. But in order for this to work I have to explicitly write the work function inside the Event Listener. In order to make this code reusable, I need to pass work in from outside.
The implementation I have in my head would look something like this:
export default class WebWorker {
constructor (work) {
const worker = work => () => {
self.addEventListener('message', function (e) {
if (!e.data) return
postMessage(work(e.data))
})
}
const code = worker(work).toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
However, at least when ran in the browser the value of work does not get passed through to the handler of self.addEventListener.
I have tried to do this using .bind but so far to no avail. Can anyone help?
javascript scope refactoring web-worker
edited Nov 22 at 17:15
Andreas
16.2k32741
asked Nov 22 at 16:53
fredmoon
397
I have a fairly large web application which now uses several web workers. As a result there is now a fair bit of duplicate code which I would like to reduce, but I am having some problems making my code more generic.
As a starting example here is a working example of a class which returns a new Worker, that will execute the following function on the input and return result:
data => data.map(document => document._id)
export default class WebWorker {
constructor () {
const worker = () => {
self.addEventListener('message', function (e) {
if (!e.data) return
const work = data => data.map(document => document._id)
postMessage(work(e.data))
})
}
const code = worker.toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
This code works as expected. But in order for this to work I have to explicitly write the work function inside the Event Listener. In order to make this code reusable, I need to pass work in from outside.
The implementation I have in my head would look something like this:
export default class WebWorker {
constructor (work) {
const worker = work => () => {
self.addEventListener('message', function (e) {
if (!e.data) return
postMessage(work(e.data))
})
}
const code = worker(work).toString()
const blob = new Blob(['(' + code + ')()'])
return new Worker(URL.createObjectURL(blob))
}
}
However, at least when ran in the browser the value of work does not get passed through to the handler of self.addEventListener.
I have tried to do this using .bind but so far to no avail. Can anyone help?
javascript scope refactoring web-worker
javascript scope refactoring web-worker
edited Nov 22 at 17:15
Andreas
16.2k32741
asked Nov 22 at 16:53
fredmoon
397
edited Nov 22 at 17:15
Andreas
16.2k32741
asked Nov 22 at 16:53
fredmoon
397
edited Nov 22 at 17:15
Andreas
16.2k32741
edited Nov 22 at 17:15
Andreas
16.2k32741
edited Nov 22 at 17:15
Andreas
16.2k32741
16.2k32741
asked Nov 22 at 16:53
fredmoon
397
asked Nov 22 at 16:53
fredmoon
397
asked Nov 22 at 16:53
fredmoon
397
397
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435415%2fhow-do-i-pass-a-function-argument-to-a-web-worker-with-addeventlistener%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435415%2fhow-do-i-pass-a-function-argument-to-a-web-worker-with-addeventlistener%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
