my question has been asked once here:
clearInterval in webworker is not working
The solution seems clear but for some reason it is not working for me yet. I have a web worker that is sending an interval back to the main thread. I want to be able to stop the interval with clearInterval, but it is not working.
I have it set up exactly the same as it suggests in the previous question, but still no luck. I have added some console.logs to verify I'm in the correct block. "Stop" logs to the console when it supposed to, but the timer doesn't stop posting to the main thread.
Can anyone spot what's going on here?
Thanks
worker.js
let mytimer;
self.onmessage = function(evt) {
if (evt.data == "start") {
console.log("start")
var i = 0;
mytimer = setInterval(function() {
i++;
postMessage(i);
}, 1000);
} else if (evt.data == "stop") {
console.log("stop")
clearInterval(mytimer);
}
};
Then I'm calling this from my React hook when timer.time is above or below a certain value (2000 in this case)
main.js
const worker = new myWorker()
useEffect(() => {
worker.addEventListener('message', function(e) {
//from interval in the worker
console.log('Message from Worker: ' + e.data);
})
if(timer.time > 2000){
worker.postMessage("start")
}else{
worker.postMessage("stop")
}
},[timer.time])
You should also clear the interval when you start a new interval. If you don't do it, your previous interval would keep running, and you'll lose the ability to clear it:
let mytimer;
self.onmessage = function(evt) {
console.log(evt.data)
if(evt.data === 'start' || evt.data === 'stop') {
clearInterval(mytimer);
}
if (evt.data == "start") {
var i = 0;
mytimer = setInterval(function() {
i++;
postMessage(i);
}, 1000);
}
};
You should create a single instance of the worker, and store it as ref:
const worker = useRef()
useEffect(() => {
worker.current = new myWorker()
return () => {
worker.current.terminate();
}
}, [])
Not related, but in addition, the useEffect adds a new event listener whenever timer.time changes, without clearing the previous one. I would split this into 2 useEffect blocks, one for sending (which can be combind with the creation of the worker), and the other for receiving.
useEffect(() => {
const eventHander = e => {
//from interval in the worker
console.log('Message from Worker: ' + e.data);
}
worker.current.addEventListener('message', eventHander)
return () => {
worker.current.removeEventListener('message', eventHander)
}
}, [])
useEffect(() => {
worker.current.postMessage(timer.time > 2000 ? 'start' : 'stop')
}, [timer.time])
I'm not sure about web workers but I am very familiar with using intervals in useEffect. Since useEffect is called everytime your dependencies change (timer.time), you need to store the interval in a useRef unless you are going to be clearing it before your dependency next changes
Related
I'm making a setInterval method in my discord bot, but I have an issue in stopping the Interval.
Look at my code:
const Discord = require('discord.js');
const client = new Discord.Client();
client.once('ready', () => {
console.log('Im online');
});
client.on('message', async msg => {
var interval;
if(msg.content == '!spam')
{
interval = setInterval(() => {
msg.channel.send('test');
}, 2000);
}
if(msg.content.startsWith('!stop'))
{
clearInterval(interval);
}
});
That should definitely work, right?
If you know the answer please help me!!
The problem is:
client.on('message', async msg => {
var interval;
This creates a new variable binding interval every single time the message handler runs. Inside any single message handler, either
interval = setInterval(() => {
msg.channel.send('test');
}, 2000);
will run, or
if (msg.content.startsWith('!stop')) {
clearInterval(interval);
}
will run (or neither will run). But the interval is not persistent outside of the function, so further messages will be attempting to clear a different interval binding.
Make interval persistent instead, and also check that you don't start an interval while one is already going on:
let interval;
client.on('message', (msg) => {
if (msg.content == '!spam' && !interval) {
interval = setInterval(() => {
msg.channel.send('test');
}, 2000);
}
if (msg.content.startsWith('!stop')) {
clearInterval(interval);
interval = null;
}
});
self.setTimeout reliably fires self.registration.showNotification after the expected delay, only under the condition the browser is NOT minimized / hidden.
It seems to work up to 20 seconds later. After that, it silently fails.
I have not yet determined if it is the self.setTimeout which fails to run the callback, or if it is the self.registration.showNotification fails to show the notification.
Code:
importScripts('./ngsw-worker.js');
let pendingNotifications = new Map();
function wait(ms, pendingNotification) {
return new Promise(resolve => {
pendingNotification.TimerId = setTimeout(resolve, ms);
});
}
async function processNotification(data, pendingNotification) {
let delay = await wait(data.Data.DeferredSeconds * 1000, pendingNotification);
//let notCancelled = pendingNotifications.has(data.Data.CancellationToken);
pendingNotifications.delete(data.Data.CancellationToken);
//if (notCancelled) {
self.registration.showNotification(data.Data.Title, { icon: data.Data.Icon, vibrate: data.Data.VibrationPattern, body: data.Data.Body });
//}
return null;
}
self.addEventListener('message', function (messageEvent) {
let data = messageEvent.data;
if (data == null) {
return;
}
if (data.Type == "Notification") {
let pendingNotification = {
TimerId: -1,
CancellationToken: data.Data.CancellationToken
};
pendingNotifications.set(data.Data.CancellationToken, pendingNotification);
messageEvent.waitUntil(processNotification(data, pendingNotification));
}
if (data.Type == "NotificationCancel") {
let pendingNotification = pendingNotifications.get(data.Data.CancellationToken);
if (pendingNotification == null) {
return;
}
self.clearTimeout(pendingNotification.TimerId);
pendingNotifications.delete(pendingNotification.CancellationToken);
}
})
A service worker is aggressively killed by the browser when it "appears" to be idle.
If you have asynchronous work that you want to perform while keeping the service worker alive, you need to perform that work inside of a Promise which you then pass to event.waitUntil(). This does not keep the service worker alive forever, but it does tell the browser to extend the service worker's lifetime until either the Promise resolves or a browser-specific time limit (usually a few minutes) has elapsed.
Any service worker event that inherits from ExtendableEvent, including MessageEvent, exposes a waitUntil() method.
You'll need to rewrite your code a bit to translate the setTimeout() calls into something that's Promise-friendly, though.
I have a simple server-side timer in NodeJS application to send some data with socket to client. How do I manage to send Timer ID to client so it can be stopped from a client side?
I tried to pass returned class in socket payload, but got an error "Max call stack size exceeded.
socket.on('start', () => {
const timerID = setInterval(()=>{
socket.emit('data',someData)
},3000)
socket.emit('ID',timerId)
}
Also tried to map over class symbols, but nothing works.
const array = Object.getOwnPropertySymbols(timerID);
array.map((symbol) => {
clearInterval(timerID[symbol]);
});
Found in NodeJS Documentation this:
timeout[Symbol.toPrimitive]"()
Returns: number that can be used to reference this timeout
But it also didn't work.
The client cannot stop your timerID and, in nodejs a timerID is not a simple integer either or something that can be stringified so it can't effectively be sent to the client.
You could create your own integer identifier that is mapped to the actual timerID, send that to the client and then the client could send the server back a message that it wishes to cancel timer X. You would look up timerX in your Map, find the real timerID and stop the timer.
const timerMap = new Map();
const timerCntr = 0;
socket.on('start', () => {
const timerID = setInterval(()=>{
socket.emit('data', someData)
}, 3000);
// create an integer reference for the timer
// save a mapping between the integer reference and the actual timerID
// in a server-side Map object
const externalTimerID = timerCntr++;
timerMap.set(externalTimerID, timerID);
socket.emit('ID', externalTimerID);
}
// when client wants to stop the timer
socket.on('stop', externalTimerID => {
let timerID = timerMap.get(externalTimerID);
clearInterval(timerID);
// remove externalTimerID from the Map so we don't leak memory
timerMap.delete(externalTimerID);
});
Starting with node v14.9.0, you can get an integer version of the timerID that will work as a substitute for the actual timerID object.
socket.on('start', () => {
const timerID = setInterval(()=>{
socket.emit('data', someData)
}, 3000);
socket.emit('ID', timerID[Symbol.toPrimitive]());
}
// when client wants to stop the timer
socket.on('stop', externalTimerID => {
clearInterval(externalTimerID );
});
Here's a sample nodejs app where I verified that timerID[Symbol.toPrimitive]() is a number and will work as a substitute for the timerID object.
const timerID = setInterval(() => {
console.log(`hi`);
}, 500);
const integerID = timerID[Symbol.toPrimitive]();
console.log(typeof integerID, integerID); // shows it is an integer
setTimeout(() => {
console.log("clearing Interval with integerID");
clearInterval(integerID);
}, 2000);
I understand how to use setTimeout function, but I can't find a way to create a function like it.
I have an example:
setTimeout(() => {
console.log('3s');
}, 3000);
while(1);
The result is setTimeout callback never call so I think it use the same thread like every js other functions. But when it's check the time reach or not? and how it can do that?
Updated
To avoid misunderstanding I update my question.
I can't find a way to create a async function with callback after specify time (without using setTimeout and don't block entire thread). This function setTimeout seen like a miracle to me. I want to understand how it work.
Just for the game since I really don't see why you couldn't use setTimeout...
To create a non-blocking timer, without using the setTimeout/setInterval methods, you have only two ways:
event based timer
run your infinite loop in a second thread
Event based timer
One naive implementation would be to use the MessageEvent interface and polling until the time has been reached. But that's not really advice-able for long timeouts as this would force the event-loop to constantly poll new tasks, which is bad for trees.
function myTimer(cb, ms) {
const begin = performance.now();
const channel = myTimer.channel ??= new MessageChannel();
const controller = new AbortController();
channel.port1.addEventListener("message", (evt) => {
if(performance.now() - begin >= ms) {
controller.abort();
cb();
}
else if(evt.data === begin) channel.port2.postMessage(begin);
}, { signal: controller.signal });
channel.port1.start();
channel.port2.postMessage(begin);
}
myTimer(() => console.log("world"), 2000);
myTimer(() => console.log("hello"), 100);
So instead, if available, one might want to use the Web Audio API and the AudioScheduledSourceNode, which makes great use of the high precision Audio Context's own clock:
function myTimer(cb, ms) {
if(!myTimer.ctx) myTimer.ctx = new (window.AudioContext || window.webkitAudioContext)();
var ctx = myTimer.ctx;
var silence = ctx.createGain();
silence.gain.value = 0;
var note = ctx.createOscillator();
note.connect(silence);
silence.connect(ctx.destination);
note.onended = function() { cb() };
note.start(0);
note.stop(ctx.currentTime + (ms / 1000));
}
myTimer(()=>console.log('world'), 2000);
myTimer(()=>console.log('hello'), 200);
Infinite loop on a different thread
Yes, using Web Workers we can run infinite loops without killing our web page:
function myTimer(cb, ms) {
var workerBlob = new Blob([mytimerworkerscript.textContent], {type: 'application/javascript'});
var url = URL.createObjectURL(workerBlob);
var worker = new Worker(url);
worker.onmessage = function() {
URL.revokeObjectURL(url);
worker.terminate();
cb();
};
worker.postMessage(ms);
}
myTimer(()=>console.log('world'), 2000);
myTimer(()=>console.log('hello'), 200);
<script id="mytimerworkerscript" type="application/worker-script">
self.onmessage = function(evt) {
var ms = evt.data;
var now = performance.now();
while(performance.now() - now < ms) {}
self.postMessage('done');
}
</script>
And for the ones who like to show off they know about the latest features not yet really available (totally not my style), a little mention of the incoming Prioritized Post Task API and its delayed tasks, which are basically a more powerful setTimeout, returning a promise, on which we can set prioritization.
(async () => {
if(globalThis.scheduler) {
const p1 = scheduler.postTask(()=>{ console.log("world"); }, { delay: 2000} );
const p2 = scheduler.postTask(()=>{ console.log("hello"); }, { delay: 1000} );
await p2;
console.log("future");
}
else {
console.log("Your browser doesn't support this API yet");
}
})();
The reason callback of setTimeout() is not being called is, you have while(1) in your code which acts as infinite loop. It will keep your javascript stack busy whole time and that is the reason event loop will never push callback function of setTimeout() in stack.
If you remove while(1) from your code, callback for setTimeout() should get invoked.
setTimeout(() => {
console.log('3s');
}, 3000);
To create your own setTimeout function, you can use the following function, setMyTimeout() to do that without using setTimeout.
var foo= ()=>{
console.log(3,"Called after 3 seconds",new Date().getTime());
}
var setMyTimeOut = (foo,timeOut)=>{
let timer;
let currentTime = new Date().getTime();
let blah=()=>{
if (new Date().getTime() >= currentTime + timeOut) {
clearInterval(timer);
foo()
}
}
timer= setInterval(blah, 100);
}
console.log(1,new Date().getTime());
setMyTimeOut(foo,3000)
console.log(2,new Date().getTime());
Following is the implementation of custom setTimeout and setInterval, clearTimeout and clearInterval. I created them to use in sandbox environments where builtin setTimeout and setInterval doesn't work.
const setTimeouts = [];
export function customSetTimeout(cb, interval) {
const now = window.performance.now();
const index = setTimeouts.length;
setTimeouts[index] = () => {
cb();
};
setTimeouts[index].active = true;
const handleMessage = (evt) => {
if (evt.data === index) {
if (window.performance.now() - now >= interval) {
window.removeEventListener('message', handleMessage);
if (setTimeouts[index].active) {
setTimeouts[index]();
}
} else {
window.postMessage(index, '*');
}
}
};
window.addEventListener('message', handleMessage);
window.postMessage(index, '*');
return index;
}
export function customClearTimeout(setTimeoutId) {
if (setTimeouts[setTimeoutId]) {
setTimeouts[setTimeoutId].active = false;
}
}
const setIntervals = [];
export function customSetInterval(cb, interval) {
const intervalId = setIntervals.length;
setIntervals[intervalId] = function () {
if (setIntervals[intervalId].active) {
cb();
customSetTimeout(setIntervals[intervalId], interval);
}
};
setIntervals[intervalId].active = true;
customSetTimeout(setIntervals[intervalId], interval);
return intervalId;
}
export function customClearInterval(intervalId) {
if (setIntervals[intervalId]) {
setIntervals[intervalId].active = false;
}
}
Hi you can try this. ]
HOpe it will help. Thanks
function customSetTimeOut (callback, ms) {
var dt = new Date();
var i = dt.getTime();
var future = i + ms;
while(Date.now() <= future) {
//do nothing - blocking
}
return callback();
}
customSetTimeOut(function(){
console.log("Timeout success");
},1000);
My understanding is that an entire array is pushed to a subscriber, unlike say an interval observer that can be unsubscribed/cancelled.
For example the following cancellation works...
// emit a value every second for approx 10 seconds
let obs = Rx.Observable.interval(1000)
.take(10)
let sub = obs.subscribe(console.log);
// but cancel after approx 4 seconds
setTimeout(() => {
console.log('cancelling');
sub.unsubscribe()
}, 4000);
<script src="https://unpkg.com/rxjs#5.5.10/bundles/Rx.min.js"></script>
However, replacing the interval with an array doesn't.
// emit a range
let largeArray = [...Array(9999).keys()];
let obs = Rx.Observable.from(largeArray)
let sub = obs.subscribe(console.log);
// but cancel after approx 1ms
setTimeout(() => {
console.log('cancelling');
sub.unsubscribe()
}, 1);
// ... doesn't cancel
<script src="https://unpkg.com/rxjs#5.5.10/bundles/Rx.min.js"></script>
Does each element need to be made asynchronous somehow, for example by wrapping it in setTimeout(..., 0)? Perhaps I've been staring at this problem too long and I'm totally off course in thinking that the processing of an array can be cancelled?
When using from(...) on an array all of the values will be emitted synchronously which doesn't allow any execution time to be granted to the setTimeout that you are using to unsubscribe. Infact, it finishes emitting before the line for the setTimeout is even reached. To allow the emits to not hog the thread you could use the async scheduler (from(..., Rx.Scheduler.async)) which will schedule work using setInterval.
Here are the docs: https://github.com/ReactiveX/rxjs/blob/master/doc/scheduler.md#scheduler-types
Here is a running example. I had to up the timeout to 100 to allow more room to breath. This will slow down your execution of-course. I don't know the reason that you are attempting this. We could probably provide some better advice if you could share the exact use-case.
// emit a range
let largeArray = [...Array(9999).keys()];
let obs = Rx.Observable.from(largeArray, Rx.Scheduler.async);
let sub = obs.subscribe(console.log);
// but cancel after approx 1ms
setTimeout(() => {
console.log('cancelling');
sub.unsubscribe()
}, 100);
// ... doesn't cancel
<script src="https://unpkg.com/rxjs#5.5.10/bundles/Rx.min.js"></script>
I've marked #bygrace's answer correct. Much appreciated! As mentioned in the comment to his answer, I'm posting a custom implementation of an observable that does support such cancellation for interest ...
const observable = stream => {
let timerID;
return {
subscribe: observer => {
timerID = setInterval(() => {
if (stream.length === 0) {
observer.complete();
clearInterval(timerID);
timerID = undefined;
}
else {
observer.next(stream.shift());
}
}, 0);
return {
unsubscribe: () => {
if (timerID) {
clearInterval(timerID);
timerID = undefined;
observer.cancelled();
}
}
}
}
}
}
// will count to 9999 in the console ...
let largeArray = [...Array(9999).keys()];
let obs = observable(largeArray);
let sub = obs.subscribe({
next: a => console.log(a),
cancelled: () => console.log('cancelled')
});
// except I cancel it here
setTimeout(sub.unsubscribe, 200);