I have a function that returns Promise
let processWork = function () {
return new Promise(resolve => {
console.log('- internal: start')
// just wait 200ms for example
let future = new Date(new Date().getTime() + 200)
while (future > new Date()) {}
console.log('- internal: done')
resolve()
})
}
I call it and use then function to change variable to break endless while but not work
let doing = false
let done = false
while (!done) {
if (doing) {
continue
}
console.log('Starting work')
doing = true
processWork()
.then(() => {
console.log('Finished')
done = true
})
}
I get output
Starting work
- internal: start
- internal: done
and my code's still running forever.
My question is why then function not running in this case.
It is not true that a promise will somehow get resolved while a busy loop is being executed. As long as a loop is executing no other JavaScript will execute (excluding web workers). The following loop will always execute the continue statement in every iteration and will never finish.
let doing = false
let done = false
while (!done) {
if (doing) {
continue
}
// ...
}
No promise could help interrupt this loop, but in your case, there is not even a promise since processWork never gets executed.
If processWork would get executed, the loop in the promise constructor callback will lock up the browser until the target time arrives: no other JavaScript gets executed during that delay. This defeats the purpose of promises: they are intended not to lock up the browser and allow the execution of other code while the promise is still pending.
So, do it like this:
let processWork = function () {
return new Promise(resolve => {
console.log('- internal: start delay of 200ms')
// just wait 200ms for example, but don't stop execution of other code
setTimeout(resolve, 200);
})
}
console.log('Starting work')
processWork().then(() => {
console.log('Promise resolved. Finished');
});
console.log('Waiting for promise to resolve...');
console.log('In the meanwhile let\'s calculate 10!');
let fact = 1;
for (let i = 1; i <= 10; i++) {
fact *= i;
}
console.log('10! = ', fact);
Related
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 attempting to define a function that returns a promise. The promise should resolve when a given array is set (push()).
To do this I'm attempting to use a Proxy object (influenced by this):
let a = []
;(async function(){
const observe = array => new Promise(resolve =>
new Proxy(array, {
set(array, key, val) {
array[key] = val;
resolve();
}
}));
while(true){
await observe(a);
console.log(new Date().toLocaleTimeString(),"Blimey Guv'nor:",`${a.pop()}`);
}
})(a);
;(async function(){
await new Promise(resolve => timerID = setTimeout(resolve, 2000))
a.push('ʕ·͡ᴥ·ʔ');
a.push('¯\(°_o)/¯ ')
})(a)
I can't see why this doesn't work. Does anyone have any idea?
More generally, what is a good way to have a promise resolve on push to an array?
The problems with your attempt:
you invoke .push on the original array, not the proxied one. Where you create the proxy, it is returned to no-one: any reference to it is lost (and will be garbage collected).
The code following after the line with await will execute asynchronously, so after all of your push calls have already executed. That means that console.log will execute when the array already has two elements. Promises are thus not the right tool for what you want, as the resolution of a promise can only be acted upon when all other synchronous code has run to completion. To get notifications during the execution synchronously, you need a synchronous solution, while promises are based on asynchronous execution.
Just to complete the answer, I provide here a simple synchronous callback solution:
function observed(array, cb) {
return new Proxy(array, {
set(array, key, val) {
array[key] = val;
if (!isNaN(key)) cb(); // now it is synchronous
return true;
}
});
}
let a = observed([], () =>
console.log(new Date().toLocaleTimeString(),"Blimey Guv'nor:", `${a.pop()}`)
);
a.push('ʕ·͡ᴥ·ʔ');
a.push('¯\(°_o)/¯ ');
As noted before: promises are not the right tool when you need synchronous code execution.
When each push is executed asynchronously
You can use promises, if you are sure that each push happens in a separate task, where the promise job queue is processed in between every pair of push calls.
For instance, if you make each push call as part of an input event handler, or as the callback for a setTimeout timer, then it is possible:
function observed(array) {
let resolve = () => null; // dummy
let proxy = new Proxy(array, {
set(array, key, val) {
array[key] = val;
if (!isNaN(key)) resolve();
return true;
}
});
proxy.observe = () => new Promise(r => resolve = r);
return proxy;
}
let a = observed([]);
(async () => {
while (true) {
await a.observe();
console.log(new Date().toLocaleTimeString(),"Blimey Guv'nor:",`${a.pop()}`);
}
})();
setTimeout(() => a.push('ʕ·͡ᴥ·ʔ'), 100);
setTimeout(() => a.push('¯\(°_o)/¯ '), 100);
Suppose I have a function that executes an asynchronous action (doStuffAsync()) and then intends to do some other stuff (doOtherStuff()).
doStuffAsync() returns a Promise.
Also assume everything is mockable.
How do I test that my function awaits doStuffAsync() before trying to doOtherStuff()?
I thought of mocking doStuffAsync() using resolve => setTimeout(resolve(), timeout), but timeout-based testing looks very fragile.
You need a flag accessible by both doStuffAsync and doOtherStuff.
In doStuffAsync() write in that flag
In doOtherStuff() read from that flag and determine if it was written
Something like:
var isAsyncRunning = false;
function doStuffAsync(){
isAsyncRunning = true;
new Promise(function(resolve, reject) {
setTimeout(()=>{
isAsyncRunning = false;
resolve(); //irrelevant in this exercise
}, 1000);
});
}
doStuffAsync();
function doOtherStuff(){
if(isAsyncRunning){
console.log("Async is running.");
} else {
console.log("Async is no longer running.");
};
}
doOtherStuff();
setTimeout(() => {
//calling doOtherStuff 2 seconds later..
doOtherStuff();
}, 2000);
I managed to complete it with a less ugly solution than setTimeout – setImmediate.
function testedFunction() {
await MyModule.doStuffAsync();
MyModule.doOtherStuff();
}
it('awaits the asynchronous stuff before doing anything else', () => {
// Mock doStuffAsync() so that the promise is resolved at the end
// of the event loop – which means, after the test.
// -
const doStuffAsyncMock = jest.fn();
const delayedPromise = new Promise<void>(resolve => setImmediate(resolve()));
doStuffAsyncMock.mockImplementation(() => delayedPromise);
const doOtherStuffMock = jest.fn();
MyModule.doStuffAsync = doStuffAsyncMock;
MyModule.doOtherStuffMock = doOtherStuffMock;
testedFunction();
expect(doOtherStuffMock).toHaveBeenCalledTimes(0);
}
setImmediate will put off the resolution of your promise to the end of the event loop, which is after your test completes.
So, your assert that doOtherStuff() was not invoked:
Will pass if there is an await inside the testedFunction
Will fail if there isn't.
I have a question to async, await and setTimeout().
I thought, I use asynchron functions for slow processes. So I tried it with a large loop. On my Computer, it needs few seconds to run the following code:
function slowFunction() {
return new Promise(resolve => {
setTimeout(() => {
for (let i = 0; i < 4000000000; i++) {};
resolve('Ready at ' + new Date().toLocaleTimeString('de'));
}, 0);
});
};
console.log('Start: ' + new Date().toLocaleTimeString('de'));
(async () => {
console.log('Call slow function.');
console.log(await slowFunction());
})();
console.log('There is no need to wait for the slow function: ' + new Date().toLocaleTimeString('de'));
The output is:
Start: 16:39:20
Call slow function.
There is no need to wait for the slow function: 16:39:20
Ready at 16:39:23
And now the question: What is the difference to the next code:
function slowFunction() {
return new Promise(resolve => {
for (let i = 0; i < 4000000000; i++) {};
resolve('Ready at ' + new Date().toLocaleTimeString('de'));
});
};
console.log('Start: ' + new Date().toLocaleTimeString('de'));
(async () => {
console.log('Call slow function.');
console.log(await slowFunction());
})();
console.log('There is no need to wait for the slow function: ' + new Date().toLocaleTimeString('de'));
The output is:
Start: 16:39:20
Call slow function.
There is no need to wait for the slow function: 16:39:23
Ready at 16:39:23
By the first example, it looks like asynchron. By the second example, the function wait for the end of loop.
Do I have to use setTimeout or do I have an error in the code or am I getting it wrong? I both cases, the resolve statment is behind the large loop.
The most examples for async and await used setTimeout, but I think, it's just to simulate a break.
Thanks for your help in advance.
Best greets
Pascal
TL:DR
Promises and async functions don't offload your code to another thread. If you want to move that long-running process off the main thread, on browsers look at web workers, and on Node.js look at child processes.
Details
Promises and async functions (which are just a syntax for creating and consuming promises) don't move your processing to any other thread, it still happens on the same thread you start the process on. The only thing they do is ensure that then and catch callbacks are called asynchronously. They don't make your code asynchronous (other than that one thing, ensuring the callbacks happen asynchronously).
So your first block using setTimeout just sets a timeout, returns a promise, and then when the timeout expires it blocks the main thread while your slow-running process executes. This just changes when the blocking happens a little bit, it doesn't change the fact of the blocking.
You can see that effect here, notice how the counter pauses when the long-running process occurs:
function slowFunction() {
return new Promise(resolve => {
setTimeout(() => {
const stop = Date.now() + 2000;
while (Date.now() < stop) {
// busy wait (obviously, never really do this)
}
}, 1000);
});
};
console.log("before slowFunction");
slowFunction()
.then(() => {
console.log("then handler on slowFunction's promise");
})
.catch(console.error);
console.log("after slowFunction");
let counter = 0;
const timer = setInterval(() => {
console.log(++counter);
}, 100);
setTimeout(() => {
clearInterval(timer);
console.log("done");
}, 3000);
.as-console-wrapper {
max-height: 100% !important;
}
Your second block not using setTimeout just blocks right away, because the promise executor function (the function you pass new Promise) runs immediately and synchronously, and you're not doing anything to make it asynchronous.
You can see that here; the counter pauses right away, not later:
function slowFunction() {
return new Promise(resolve => {
const stop = Date.now() + 2000;
while (Date.now() < stop) {
// busy wait (obviously, never really do this)
}
});
};
console.log("before slowFunction");
slowFunction()
.then(() => {
console.log("then handler on slowFunction's promise");
})
.catch(console.error);
console.log("after slowFunction");
let counter = 0;
const timer = setInterval(() => {
console.log(++counter);
}, 100);
setTimeout(() => {
clearInterval(timer);
console.log("done");
}, 3000);
.as-console-wrapper {
max-height: 100% !important;
}
We don't even see the before slowFunction log appear until after the long-running code has finished, because the browser never got a chance to repaint, we had the thread hogged.
Regarding async functions: The code in an async function starts out synchronous, and is synchronous until the first await (or other construct, such as setTimeout, that schedules things to execute later). Only the code after that is asynchronous (because it had to wait).
Here's an example demonstrating that:
async function foo() {
console.log("before await");
await Promise.resolve();
console.log("after await");
}
console.log("before foo");
foo()
.then(() => {
console.log("then handler on foo's promise");
})
.catch(console.error);
console.log("after foo");
Here's the output of that:
before foo
before await
after foo
after await
then handler on foo's promise
Notice how before await occurs before after foo; it's synchronous with the call to foo. But then after await doesn't occur until later (because await Promise.resolve() has to make the code following it occur asynchronously; it's syntactic sugar for then, which promises not to call its handler synchronously even if the promise is already resolved).
The difference is that this is completely synchronous code:
return new Promise(resolve => {
for (let i = 0; i < 4000000000; i++) {};
resolve('Ready at ' + new Date().toLocaleTimeString('de'));
});
This statement will block the JavaScript thread and force it to wait until all of those 4 billion iterations have taken place. Then it will move on to the next statement. Since the console.log executes after this, it will not execute until that loop has finished.
That's why you are seeing a difference.
How do I code this algorithm as a promise in JavaScript?
// condition: some situation that is not true
// interval: period to wait before trying again
// retriesAllowed: maximum number of retries to make before aborting
// retriesMade: number of retries made so far
while() {
if (condition) return true; // indicates success
if (retriesMade < retriesAllowed) return false; // or throw an exception
++retriesMade;
wait(interval);
}
This doesn't work, since it doesn't actually wait for the check to resolve to true or false before moving on:
var check = () => {
if (condition) return true; // indicates success
if (retriesMade < retriesAllowed) return false; // or throw an exception
++retriesMade;
setTimeout(check,interval)
}
check();
This doesn't work, since it doesn't actually wait for the check to resolve to true or false before moving on.
One part of that may be that the fail/exit condition seems to be inversed, so it will probably always exit after the 1st round of checking the condition:
// retriesMade starts at 0, which is likely already less-than retriesAllowed
if (retriesMade < retriesAllowed) return false;
// probably should be
if (retriesMade >= retriesAllowed) return false;
Beyond that, the lack of waiting is by design with asynchronous operations, such as setTimeout() waiting out the given delay interval. Surrounding code will always continue to execute without waiting for their result.
Instead of expecting them to wait, you'll need to establish a way to be informed when the process has actually completed and carry on from that information. Promises are one option for that.
Side note: A thorough explanation of the behavior and other options are provided in "How do I return the response from an asynchronous call?"
With them, in place of using return or throw, they provide resolve() and reject() functions that signal success or failure, respectively, when invoked. Their .then() and .catch() methods can be used to setup continuations.
var tries = new Promise((resolve, reject) => {
var retriesMade = 0;
var interval = 1000;
var check = () => {
if (condition) { resolve(); }
if (retriesMade >= retriesAllowed) { reject(); }
++retriesMade;
setTimeout(check, interval);
});
check();
});
tries.then(
() => console.log('success'),
() => console.log('failure')
);
Also, an alternate version that uses Promises more thoroughly, containing the iteration in a function (untilLimited) as well as permitting the condition (exitUpon) to be asynchronous, if needed.
function delay(milliseconds) {
return new Promise(function (resolve) {
setTimeout(resolve, milliseconds);
});
}
function untilLimited(limit, waitTime, exitUpon) {
return Promise.resolve()
.then(exitUpon)
.then(result => {
if (result) return true;
if (!(--limit > 0)) return Promise.reject('Limit exceeded.');
return delay(waitTime)
.then(() => untilLimited(limit, waitTime, exitUpon))
});
}
untilLimited(5, 500, () => false /* condition */)
.then(
(result) => console.log('success', result),
(result) => console.log('failure', result)
);
You could use the q library (or $q in angular) to return a deferred object, and in the background run the interval, and if after a few attempts the condition is not satisfied, reject the promise.
Example for Angular