I wanted to directly call a function (like interrupt handler) when a certain condition is met. I didn't want to using "polling" for that as it increases time complexity.
count = 1
p = new Promise((resolve, reject)=>{
if(count == 2){
resolve("hello")
}
});
p.then((msg)=>{
console.log(msg)
})
console.log("1 now");
count = 2;
I expected console.log(msg) to run when count=2 but this is not the case. It turned out that the promise is still "pending". What is the reason this happens? And how do I implement my question.
You can use a Proxy to listen variable changes.
const count = new Proxy({
value: 0
}, {
set(target, prop, val) {
// set value
target[prop] = val;
console.log(`count is ${val}`);
// stop condition
if (val == 2) {
console.log(`count is 2(trigger stop condition)`);
}
}
});
// wait 2 seconds and change count.value to 1
setTimeout(() => count.value = 1, 2000);
// wait 2 seconds and change count.value to 2
// it triggers the stop condition
setTimeout(() => count.value = 2, 2000);
console.log("Waiting for changes ...");
reference: Listen to js variable change
Proxy is one of the solutions for this. But I post another approach for your case.
You can define a custom class or object, and work with that class. Also you register your custom listener for it, and do whatever.
This is a sample of my code. Maybe it will give you some ideas for your solution.
class MyObject {
constructor(value, func) {
this._value = value;
this._listener = func;
}
get value() {
return this._value;
}
set value(newValue) {
this._listener(newValue);
this._value = newValue;
}
}
function customListener(changedValue) {
console.log(`New Value Detected: ${changedValue}`);
}
const count = new MyObject(1, customListener);
count.value = 2;
The issue you're having is that the code inside the Promise resolves synchronously. It seems like you are assuming Promises are by default async, but that is a common async misconception. So, the code
if(count == 2){
resolve("hello")
}
resolves synchronously (that is, right after you declare count to be 1) so the Promise will never be resolved. If you want to asynchronously check for a condition without using libraries, you can use setInterval:
function checkForCondition(count, time){
return new Promise(resolve => {
const interval = setInterval(() => {
if (count == 2){
resolve("The count is 2!");
}
} , time);
});
}
If you call this function, the callback inside setInterval will be placed on the event loop every x ms, where x is equal to the time parameter.
Related
I am trying to return a function that only invokes a callback function 'func' once per every 'wait' milliseconds.
Additional calls to the callback 'func' within the 'wait' period should NOT be invoked or queued.
This is what I have so far...
function throttle(func, wait) {
function inner(...args) {
setInterval(func(...args), wait);
}
return inner;
}
When I run the code through the test algorithm I get the following errors:
"throttled functions should only be able to be called again after the specified time"
Here is the testing algorithm...
let counter = 0;
const incr = () => counter++;
const throttledIncr = throttle(incr, 32);
throttledIncr();
throttledIncr();
setTimeout(() => {
expect(counter).to.eql(1);
throttledIncr();
setTimeout(() => {
expect(counter).to.eql(2);
done();
}, 32);
}, 32);
"throttled functions return their value"
Here is the testing algorithm...
let counter = 0;
const incr = () => ++counter;
const throttledIncr = throttle(incr, 32);
const result = throttledIncr();
setTimeout(() => {
expect(result).to.eql(1);
expect(counter).to.eql(1);
done();
}, 64);
"throttled functions called repeatedly should adhere to time limitations"
Here is the testing algorithm...
const incr = () => ++counter;
const throttledIncr = throttle(incr, 64);
const results = [];
const saveResult = () => results.push(throttledIncr());
saveResult();
saveResult();
setTimeout(saveResult, 32);
setTimeout(saveResult, 80);
setTimeout(saveResult, 96);
setTimeout(saveResult, 180);
setTimeout(() => {
expect(results[0]).to.eql(1);
expect(results[1]).to.be(undefined);
expect(results[2]).to.be(undefined);
expect(results[3]).to.eql(2);
expect(results[4]).to.be(undefined);
expect(results[5]).to.eql(3);
done();
}, 192);
My questions regarding each case:
How do I prevent the function from being called again ?
Why ISNT my function returning value? I can't deduce what or how to return a value with the given testing algorithm.
What does "throttled functions called repeatedly should adhere to time limitations" even mean? This seems contradictory to the first error. There isn't any mention of setting a time limit so I don't believe using setTimeout here is what they mean...
How do I prevent the function from being called again ?
function throttle(func, wait) {
function inner(...args) {
setInterval(func(...args), wait);
}
return inner;
}
First, your code above does not do what you expect it to do. Currently every time you invoke throttle, you are adding func to the event loop, to be executed on an interval.
So when you call throttleIncr 5 times, you are adding incr to the eventloop to be called five times.
One approach (imo), would be to keep track of the last time that throttle(func) was invoked. The next time throttle(func) is invoked, check to see if the wait time has elapsed. If so, invoke func and save off the new time. If not, return.
Why ISNT my function returning value? I can't deduce what or how to return a value with the given testing algorithm.
Your incr function, IS returning the value, however your throttle function puts it on the eventloop, for asychronous execution, so the return value is not available.
What does "throttled functions called repeatedly should adhere to time limitations" even mean? This seems contradictory to the first error.
This is not a javascript error, and likely a custom failure message from the tests you are invoking.
I tried something here, that seems to be working:
function throttle2(callback, delay = 1000) {
let interval;
let currentArgs;
return (...args) => {
currentArgs = args;
if (!interval) {
interval = setInterval(() => {
if (currentArgs) {
callback(...currentArgs);
currentArgs = null;
} else {
clearInterval(interval);
interval = false;
}
}, delay);
}
};
}
Sandbox: https://codesandbox.io/s/competent-tereshkova-ccop2e?file=/index.js:167-179
How to check if there is already running function and if it is exist listen to this function result;
async function a() {
// wait 5 seconds and return foo = foo + 1;
// if A is already running await and return result of this running function A instead result;
}
If I translate the problem correctly, A returns a promise that is asynchronously settled. While the promise is pending, all calls to a wrapper function around A should return the currently pending promise.
If, however, A has not been called, or a previously return promise has been settled, A should be called again.
This can be achieved by chaining off the promise returned by A, using promise handlers to determine results are no longer pending, and have the wrapper function return the chained promise. This example code speeds up the process a little - four successive calls made to a 500ms apart get the same fulfilled value from A which is taking 2000ms to perform a mythical asynchronous task:
// promise a delay
const delay = ms => new Promise(resolve=>setTimeout(resolve, ms));
// async function A
let foo =0;
async function A() {
await delay( 2000); // 2 second example
return foo = foo + 1;
}
// Wrapper function a
const a=(()=>{
let pending = null;
const onfulfill = data => { pending = null; return data};
const onreject = err => { pending = null; throw err};
let a = ()=> pending || (pending = A().then(onfulfill, onreject));
return a;
})();
// and test
async function test() {
for( let i=1; i < 11; ++i) {
a().then( data=> console.log(`a() call ${i} fulfills with ${data}`));
await delay(500);
}
}
console.log(" a is a named function ", a.name == 'a')
test();
a is coded to be a named function which minimizes run time object creation by using the two parameter form of then and passing pre-compiled functions as handler arguments.
The catch handler re-throws the error for caller code to handle.
synchronous and asynchronous code don't mix well together. Calls to wrapper function a always receive a pending promise value in return.
Solution
You can create class that will be execute one flow (maximum) and await result if flow already running. It may looks something like that:
class OneThreadExecutor {
// Boolean variable which represents is task running right now
taskRunning = false;
// All Promise.resolve callbacks
listeners = [];
// Accept initial value
constructor(value = 0) {
this.value = value;
}
// Send [result = value + 1] after 5 sec
startNewTask = () => {
this.taskRunning = true;
setTimeout(() => {
this.taskRunning = false;
return this.sendResult();
}, 5000)
}
// Call all Promise.resolve callbacks, and pass [value + 1] to them
sendResult = () => {
for (const listener of this.listeners) {
listener(++this.value);
}
this.listeners = [];
}
// Main method that exec one task
getResult = () => new Promise(resolve => {
// Add callback to queue
this.listeners.push(resolve);
// Start new task if necessary
if (!this.taskRunning) this.startNewTask();
})
}
General concept
Async getResult method will register promise in class' queue. Any successfull task execution will send result to queue. Current task returns value + 1 on each getResult call and take 5 seconds for whole flow.
Usage
const a = new OneThreadExecutor(); // value = 0 by default
// will start task#1, 5 sec left till .then call, value = 1
a.getResult().then(...)
// 2.5 sec left, task#1 is already half progress, value = 2
setTimeout(() => {
a.getResult().then(...)
}, 2500)
Async/await
const a = new OneThreadExecutor(3); // let's set value = 3 initially
// will start task#1, 5 sec left till .then call, value = 4
a.getResult();
// wait till task#1 completed, 5 sec left, value = 5
const value = await a.getResult();
// will start task#2 bacause not task running, 5 sec left, value = 6
a.getResult();
Cons
In demo solution we already expect successful task execution, without error handling, so you may need to extend it for proper error catching during task execution.
var is_a_running = false;
function a() {
if (is_a_running == false) {
is_a_running = true
//do something
//after you have done the thing
is_a_running = false
}
else if (is_a_running == true){
result();
}
}
This is should help you
I'm quite new to using promises in JS, and im trying to have a function execute before executing some more code in another function. Only issue is that the promised function uses an if statement to loop a setTimeout command. I added an if statement to make sure the function is done looping before i resolve the promise but the resolve just isn't doing anything. I used console.log to make sure that the if statement is executing and it has no problems printing to the console on either side of the resolve. Any help would be greatly appreciated.
Code:
async makeToast(loader, toaster){
toaster.texture = loader.resources['toaster_down'].texture;
this.interactive = false;
this.x = toaster.x;
this.y = toaster.y - 100;
let transform = {y: this.y};
let popDown = new TWEEN.Tween(transform)
.to({y: toaster.y - 50}, 200)
.onUpdate(() => this.y = transform.y);
popDown.start();
await this.changeTexture(loader, toaster.setting)
console.log('toasting done');
this.interactive = true;
}
changeTexture(loader, setting){
return new Promise((resolve, reject) => {
setTimeout(() => {
this.state++;
this.texture = loader.resources[`bread${this.state}`].texture;
if(this.state < setting) this.changeTexture(loader, setting);
else if(this.state == setting) resolve();
}, 1000);
});
}
After the first setTimeout callback executes, you will never resolve the outermost call's returned promise. You will resolve the innermost call's returned promise eventually, but that does nothing since the promise returned from there is never used.
You could write if (this.state < setting) resolve(this.changeTexture(loader, setting)) but I'd recommend a different, far less confusing (and non-recursive) way instead:
// This could be defined globally, can be useful elsewhere too
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
// This is in your object
async changeTexture (loader, setting) {
while (this.state < setting) {
await delay(1000)
this.state++
this.texture = loader.resources[`bread${this.state}`].texture
}
}
Here I've made the changeTexture function async as well, so we can use await inside and therefore implement the delay in a more straight-forward manner and can build a regular while loop around the whole thing.
(Note: Technically your existing code does the first iteration unconditionally, so a do ... while would be more accurate, but I'm assuming that is just a result of the way you tried building it with setTimeout and not really what you need.)
You can as long as there is a closure linking the resolve variable in the Promise constructor with the resolve() you call in your if statement. However in your code you don't have this:
class SomeClass {
// ...
changeTexture(loader, setting){
return new Promise((resolve, reject) => {
setTimeout(() => {
this.state++;
this.texture = loader.resources[`bread${this.state}`].texture;
if(this.state < setting)
this.changeTexture(loader, setting); <----------.
else if(this.state == setting) |
resolve(); <-- There is a closure to this /
}, 1000); /
}); .---------------------------'
} |
} However this function call will have it's own
"resolve" variable that is no longer captured
by this closure.
This means that when the if/else finally calls resolve() that resolve has nothing to do with the Promise you returned when you call changeTexture().
The way to do what you want is to not call changeTexture recursively so that you maintain a closure between the Promise's resolve variable and the resolve you finally call. To do this simply separate your setTimeout callback from the main changeTexture function:
class SomeClass {
// ...
changeTexture(loader, setting){
return new Promise((resolve, reject) => {
let loop = () => { // use arrow function to capture "this"
this.state++;
this.texture = loader.resources[`bread${this.state}`].texture;
if(this.state < setting) setTimeout(loop, 1000);
else if(this.state == setting) resolve();
}
loop();
});
}
}
Alternatively for minimal change in code you can get your code working by changing only one line:
class SomeClass {
// ...
changeTexture(loader, setting){
return new Promise((resolve, reject) => {
setTimeout(() => {
this.state++;
this.texture = loader.resources[`bread${this.state}`].texture;
if(this.state < setting) setTimeout(arguments.callee(),1000); // <----THIS
else if(this.state == setting) resolve();
}, 1000);
});
}
}
The arguments.callee variable points to the () => {... function you pass to setTimeout. However, arguments.callee is deprecated and is disabled in strict mode so use the loop function above if possible.
You can call resolve and reject from anywhere in your code you wish. But you must call exactly one of them exactly once from within your Promise.
Your sample code doesn't do that when your if-condition is false, so you need to fix that.
I want most understandable syntax for polling a flag and return when it is true, my code snippet below doesn't work I know, what's the syntax that would make it work if you get my idea ?
async function watch(flag) {
let id = setInterval(function(){
if (flag === true) {
clearInterval(id);
}
}, 1000);
return flag;
}
If you want to poll a variable where the value is a primative, then you need to define it outside the function, otherwise it can't change.
If you want to have a promise resolve when that condition is done, then you have to create it explicitly. async and await are tools for managing existing promises.
let flag = false;
function watchFlag() {
return new Promise(resolve => {
let i = setInterval(() => {
console.log("Polling…");
if (flag) {
resolve();
clearInterval(i);
}
}, 500);
});
}
setTimeout(() => {
flag = true;
}, 1500);
console.log("Watching the flag");
watchFlag().then(() => {
console.log("The flag has changed");
});
If you don't know when the flag is going to change (in 10 seconds or in 10 minutes), you can use a setter instead. Probably an anti-pattern, but again your question doesn't really show us how you would be using this flag in your code.
const flagsObject = {
set flag(stat) {
this._flag = stat;
if (stat) {
// call the function you need to call when flag is true
// you could add additional condition if you only want to run the function
// when the flag is switched
doSomething()
}
},
get flag() {
return this._flag;
}
};
flagsObject.flag = true; // doSomething() will be called
Lets say I have the following function:
let x = 1
function countForever() {
setTimeout(function() {
console.log(x)
x = x +1
countForever()
});
}
We also have an object which contains an EventEmitter called e. e has a state, and if that state doesn't equal 3, we wish to kill our function. We can achieve this with the following:
let x = 1
function countForever() {
if (e.state != 3) return
setTimeout(function() {
console.log(x)
x = x +1
countForever()
});
}
This works. However my real, non example function has a lot more steps in it, and I've found myself continually if checking the state, 8-10x through the function.
Given e is an EventEmitter I would like to catch these changes when the state changes and kill the function. Luckily, e already has an event we can listen for:
e.on('state_changed' , function(new_state) {
// Kill countForever
})
How do I stop execution of this function from outside of its scope?
EDIT: I don't know why I wrote a sample function with a setTimeout, it seems I've been quite misleading. Here's a better one:
async function functionToKill() {
if (e.state != 3) return
thing1 = await functionThatTakesALongTime()
if (e.state != 3) return
thing2 = await secondFunctionThatTakesALongTime()
if (e.state != 3) return
thing3 = await thirdFunctionThatTakesALongTime()
//.....
if (e.state != 3) return
thing10 = await tenthFunctionThatTakesALongTime()
}
// e is an event emitter
e.on('state_changed' , function(new_state) {
// Kill/interrupt functionToKill
})
Effectively within the function I'm continually checking for the state over and over and returning if it's changed. I don't feel this is clean, and would like to do the equivalent of a return from an external call triggered by an eventEmitter
You don't give us a whole lot to go on in your sample function, but here's an idea with that code. You use a master promise that when rejected causes your sequence of await operations to abort:
// create deferred object so it can be rejected externally
Promise.Deferred = function() {
if (!(this instanceof Promise.Deferred)) {
return new Promise.Deferred();
}
let p = this.promise = new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
this.then = this.promise.then.bind(p);
this.catch = this.promise.catch.bind(p);
if (this.promise.finally) {
this.finally = this.promise.finally.bind(p);
}
}
// shared promise, when rejected our function stops advancing to more operations
let killPromise = new Promise.Deferred();
function raceKill(p) {
return Promise.race(killPromise, p);
}
async function functionToKill() {
try {
thing1 = await raceKill(functionThatTakesALongTime());
thing2 = await raceKill(secondFunctionThatTakesALongTime());
thing3 = await raceKill(thirdFunctionThatTakesALongTime());
//.....
thing10 = await raceKill(tenthFunctionThatTakesALongTime());
} catch(e) {
// perhaps handle kill errors separately from actual function rejection errors
}
}
// e is an event emitter
e.on('state_changed' , function(new_state) {
// Kill/interrupt functionToKill
killPromise.reject(new Error("state_changed"));
})
This structure with Promise.race() has a bit of an advantage in that it doesn't even wait for functionThatTakesALongTime() to finish before aborting (when your pseudo-code would have been able to check e.state). It aborts immediately when you reject killPromise. That other asynchronous operation isn't magically cancelled. It will still do what it was going to do, but your functionToKill() won't wait around for it.
With actual code, there are probably more elegant ways to do this than using shared scope variables like killPromise, passing parameters, sharing something as object properties, etc... But, hopefully this shows you the general idea.
kill countForever? you can save the return value of setTimeout function with a variable such as timer, then clearTimeout(timer) when state_changed event fired. I don`t know if what I understand is right?